添加智能设备页面
This commit is contained in:
杨侠磊
parent
cfe59a1112
commit
67e20a73f5
Binary file not shown.
|
Before Width: | Height: | Size: 361 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 370 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 329 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@ -56,7 +56,7 @@ export default {
|
||||
{
|
||||
index: "9",
|
||||
title: "智能设备",
|
||||
path: "/09"
|
||||
path: "/intelligent"
|
||||
},
|
||||
{
|
||||
index: "7",
|
||||
|
||||
@ -92,16 +92,16 @@
|
||||
<img src="@/assets/img/elder/1.png" alt="">
|
||||
<div>
|
||||
<div>长者总数</div>
|
||||
<div><span>1761</span>人</div>
|
||||
<div><span>1760</span>人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div><i class="circle"></i>男性长者</div>
|
||||
<div>1761人</div>
|
||||
<div>980人</div>
|
||||
</div>
|
||||
<div>
|
||||
<div><i class="circle circle2"></i>女性长者</div>
|
||||
<div>1761人</div>
|
||||
<div>780人</div>
|
||||
</div>
|
||||
</dv-border-box-8> -->
|
||||
<dv-border-box-8 :color="['#EE7C11', '#E48900']" class="box8">
|
||||
|
||||
@ -1,954 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="menuSearch">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
value-format="yyyy-MM"
|
||||
@change="dateChange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="
|
||||
new Date().getFullYear() - 1 + '-' + (new Date().getMonth() + 1)
|
||||
"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round @click="search"
|
||||
><i class="iconfont iconchaxun"></i>查询</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<ul class="t">
|
||||
<li>
|
||||
<div>
|
||||
<img src="../../assets/img/intelligent/16.png" />
|
||||
</div>
|
||||
<div>
|
||||
<p>在押罪犯</p>
|
||||
<span
|
||||
><i class="digifaw">{{ totalData["BE_IN_PRISON"] | formatNum }}</i
|
||||
>人</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<img src="../../assets/img/intelligent/17.png" />
|
||||
</div>
|
||||
<div>
|
||||
<p>减刑</p>
|
||||
<span
|
||||
><i class="digifaw">{{
|
||||
totalData["COMMUTATION_NUM"] | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<img src="../../assets/img/intelligent/18.png" />
|
||||
</div>
|
||||
<div>
|
||||
<p>减刑率</p>
|
||||
<span
|
||||
><i class="digifaw">{{ totalData.proportion1 }}</i></span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<img src="../../assets/img/intelligent/19.png" />
|
||||
</div>
|
||||
<div>
|
||||
<p>假释</p>
|
||||
<span
|
||||
><i class="digifaw">{{ totalData["PAROLE_NUM"] | formatNum }}</i
|
||||
>人</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<img src="../../assets/img/intelligent/20.png" />
|
||||
</div>
|
||||
<div>
|
||||
<p>假释率</p>
|
||||
<span
|
||||
><i class="digifaw">{{ totalData.proportion2 }}</i></span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="b">
|
||||
<ul>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey1" :echartObj="echartObj1"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj2"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey3" :echartObj="echartObj3"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey4" :echartObj="echartObj4"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>北京各监狱减刑假释数量</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<div>假释人数(人)</div>
|
||||
<div>监狱</div>
|
||||
<div>减刑人数(人)</div>
|
||||
</li>
|
||||
<!-- a1监狱名 a2假释人数 a3减刑人数 a4假释长度 a5减刑长度 -->
|
||||
<li v-for="(item, index) in data" :key="index">
|
||||
<div>{{ item["PAROLE_NUM"] | formatNum }}</div>
|
||||
<div class="line1">
|
||||
<p :style="'width:' + item.width1"></p>
|
||||
</div>
|
||||
<div>{{ item["TYPE"] }}</div>
|
||||
<div class="line2">
|
||||
<p :style="'width:' + item.width2"></p>
|
||||
</div>
|
||||
<div>{{ item["COMMUTATION_NUM"] | formatNum }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echarts from "@/components/echarts";
|
||||
import {
|
||||
commutationParole,
|
||||
commutationParoleAnalyse,
|
||||
commutationActionCaseRatio,
|
||||
paroleActionCaseRatio,
|
||||
prisonCommutationParole,
|
||||
} from "@/api/intelligentApi";
|
||||
import {createOperationLog} from "@/api/api"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
echartObjKey1: "echartObjKey1",
|
||||
echartObjKey2: "echartObjKey2",
|
||||
echartObjKey3: "echartObjKey3",
|
||||
echartObjKey4: "echartObjKey5",
|
||||
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() - 8.64e6;
|
||||
},
|
||||
},
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
// 减刑假释汇总数据
|
||||
totalData: {},
|
||||
date: "",
|
||||
data: [],
|
||||
// 减刑假释数量分析
|
||||
echartObj1: {
|
||||
title: {
|
||||
text: "减刑假释数量分析",
|
||||
top: "10",
|
||||
left: "20",
|
||||
textStyle: {
|
||||
color: "#43ebf7", //图例字体颜色
|
||||
fontSize: "22",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "circle", //圆点
|
||||
top: "20",
|
||||
right: 10,
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "70",
|
||||
left: "30",
|
||||
right: "40",
|
||||
bottom: "30",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
rotate: 50,
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
// show:false,
|
||||
name: "单位(人)",
|
||||
type: "value",
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "减刑",
|
||||
type: "bar",
|
||||
animationDuration: 2000,
|
||||
barMaxWidth: "20",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#d3e352",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "假释",
|
||||
type: "bar",
|
||||
animationDuration: 2000,
|
||||
barMaxWidth: "20",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#34dbe0",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 减刑案由占比分析
|
||||
echartObj2: {
|
||||
color: [
|
||||
"#34dbe0",
|
||||
"#2d95ff",
|
||||
"#DC8AB5",
|
||||
"#d3e352",
|
||||
"#2ae29e",
|
||||
"#af7dff",
|
||||
"#e83828",
|
||||
], //图例颜色
|
||||
title: {
|
||||
text: "减刑案由占比分析",
|
||||
top: "10",
|
||||
left: "20",
|
||||
textStyle: {
|
||||
color: "#43ebf7", //图例字体颜色
|
||||
fontSize: "22",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.seriesName +
|
||||
"<br>" +
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人" +
|
||||
"(" +
|
||||
param.percent +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: 40,
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "减刑案由占比分析",
|
||||
type: "pie",
|
||||
top: 50,
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
data: [],
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inner", //标签的位置
|
||||
color: "#fff",
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "减刑案由占比分析",
|
||||
type: "pie",
|
||||
top: 50,
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.name + "\n" + this.formatNum(param.value) + "人"
|
||||
);
|
||||
},
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
// 边框的设置
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "35%"],
|
||||
type: "pie",
|
||||
top: 50,
|
||||
animationDuration: 2000,
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 不予减刑、不予假释占比分析
|
||||
echartObj3: {
|
||||
color: [
|
||||
"#34dbe0",
|
||||
"#2d95ff",
|
||||
"#DC8AB5",
|
||||
"#d3e352",
|
||||
"#2ae29e",
|
||||
"#af7dff",
|
||||
"#e83828",
|
||||
], //图例颜色
|
||||
title: {
|
||||
text: "不予减刑、不予假释占比分析",
|
||||
top: "10",
|
||||
left: "20",
|
||||
|
||||
textStyle: {
|
||||
color: "#43ebf7", //图例字体颜色
|
||||
fontSize: "22",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.seriesName +
|
||||
"<br>" +
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人" +
|
||||
"(" +
|
||||
param.percent +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: 40,
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "不予减刑、不予假释占比分析",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "55%"],
|
||||
radius: ["30%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
data: [],
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inner", //标签的位置
|
||||
color: "#fff",
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "不予减刑、不予假释占比分析",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "55%"],
|
||||
radius: ["30%", "60%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.name + "\n" + this.formatNum(param.value) + "人"
|
||||
);
|
||||
},
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
// 边框的设置
|
||||
center: ["50%", "55%"],
|
||||
radius: ["30%", "35%"],
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 假释案由占比分析
|
||||
echartObj4: {
|
||||
color: [
|
||||
"#34dbe0",
|
||||
"#2d95ff",
|
||||
"#DC8AB5",
|
||||
"#d3e352",
|
||||
"#2ae29e",
|
||||
"#af7dff",
|
||||
"#e83828",
|
||||
], //图例颜色
|
||||
title: {
|
||||
text: "假释案由占比分析",
|
||||
top: "10",
|
||||
left: "20",
|
||||
textStyle: {
|
||||
color: "#43ebf7", //图例字体颜色
|
||||
fontSize: "22",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.seriesName +
|
||||
"<br>" +
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人" +
|
||||
"(" +
|
||||
param.percent +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
right: "0",
|
||||
top: 40,
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "假释案由占比分析",
|
||||
type: "pie",
|
||||
top: 50,
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
data: [],
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inner", //标签的位置
|
||||
color: "#fff",
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "假释案由占比分析",
|
||||
type: "pie",
|
||||
top: 50,
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.name + "\n" + this.formatNum(param.value) + "人"
|
||||
);
|
||||
},
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
// 边框的设置
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "35%"],
|
||||
type: "pie",
|
||||
top: 50,
|
||||
animationDuration: 2000,
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echarts,
|
||||
},
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let pointParams ={
|
||||
opeLogExceptionInfo: '进入智能办案专题模块查询了减刑假释数据',//日志描述
|
||||
opeLogUserAccount:this.$cookies.get('username'),//用户账户
|
||||
opeLogSystem:"BJCM-DSJ",//系统编码
|
||||
opeLogStatus: 1,
|
||||
opeLogIp:""
|
||||
}
|
||||
createOperationLog(pointParams).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
// 减刑假释汇总数据、不予减刑、不予假释占比分析
|
||||
commutationParole(this.param)
|
||||
.then((res) => {
|
||||
// 减刑假释汇总数据
|
||||
this.totalData = {
|
||||
BE_IN_PRISON: 0,
|
||||
COMMUTATION_NUM: 0,
|
||||
proportion1: "0%",
|
||||
PAROLE_NUM: 0,
|
||||
proportion2: "0%",
|
||||
};
|
||||
this.echartObj3.series[0].data = [];
|
||||
this.echartObj3.series[1].data = [];
|
||||
if (JSON.stringify(res) != "{}" && res) {
|
||||
this.totalData = res;
|
||||
this.totalData.proportion1 =
|
||||
(
|
||||
(this.totalData["COMMUTATION_NUM"] /
|
||||
this.totalData["BE_IN_PRISON"]) *
|
||||
100
|
||||
).toFixed(2) + "%"; //减刑率
|
||||
this.totalData.proportion2 =
|
||||
(
|
||||
(this.totalData["PAROLE_NUM"] /
|
||||
this.totalData["BE_IN_PRISON"]) *
|
||||
100
|
||||
).toFixed(2) + "%"; //假释率
|
||||
// 不予减刑、不予假释占比分析
|
||||
this.echartObj3.series[0].data = [
|
||||
{ value: this.totalData["COMMUTATION_NUM"], name: "减刑" },
|
||||
{
|
||||
value: this.totalData["NON_COMMUTATION_NUM"],
|
||||
name: "不予减刑",
|
||||
},
|
||||
{ value: this.totalData["PAROLE_NUM"], name: "假释" },
|
||||
{ value: this.totalData["NON_PAROLE_NUM"], name: "不予假释" },
|
||||
];
|
||||
this.echartObj3.series[1].data = [
|
||||
{ value: this.totalData["COMMUTATION_NUM"], name: "减刑" },
|
||||
{
|
||||
value: this.totalData["NON_COMMUTATION_NUM"],
|
||||
name: "不予减刑",
|
||||
},
|
||||
{ value: this.totalData["PAROLE_NUM"], name: "假释" },
|
||||
{ value: this.totalData["NON_PAROLE_NUM"], name: "不予假释" },
|
||||
];
|
||||
}
|
||||
this.echartObjKey3 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 减刑假释数量分析
|
||||
commutationParoleAnalyse(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj1.xAxis[0].data = [];
|
||||
this.echartObj1.series[0].data = [];
|
||||
this.echartObj1.series[1].data = [];
|
||||
if (res.commutationParoleAnalyse.length > 0) {
|
||||
res.commutationParoleAnalyse.forEach((item) => {
|
||||
this.echartObj1.xAxis[0].data.push(item["YEAR_MONTH"]);
|
||||
this.echartObj1.series[0].data.push(item["COMMUTATION_NUM"]); // 减刑
|
||||
this.echartObj1.series[1].data.push(item["PAROLE_NUM"]); // 假释
|
||||
});
|
||||
}
|
||||
this.echartObjKey1 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 减刑案由占比分析
|
||||
commutationActionCaseRatio(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj2.series[0].data = res.commutationActionCaseRatio.map(
|
||||
(item) => {
|
||||
return { name: item["TYPE"], value: item["NUM"] };
|
||||
}
|
||||
);
|
||||
this.echartObj2.series[1].data = res.commutationActionCaseRatio.map(
|
||||
(item) => {
|
||||
return { name: item["TYPE"], value: item["NUM"] };
|
||||
}
|
||||
);
|
||||
this.echartObjKey2 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
|
||||
// 假释案由占比分析
|
||||
paroleActionCaseRatio(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj4.series[0].data = res.paroleActionCaseRatio.map(
|
||||
(item) => {
|
||||
return { name: item["TYPE"], value: item["NUM"] };
|
||||
}
|
||||
);
|
||||
this.echartObj4.series[1].data = res.paroleActionCaseRatio.map(
|
||||
(item) => {
|
||||
return { name: item["TYPE"], value: item["NUM"] };
|
||||
}
|
||||
);
|
||||
this.echartObjKey4 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 北京各监狱减刑假释数量
|
||||
prisonCommutationParole(this.param)
|
||||
.then((res) => {
|
||||
this.data = [
|
||||
{
|
||||
PAROLE_NUM: 0,
|
||||
TYPE: "暂无数据",
|
||||
COMMUTATION_NUM: 0,
|
||||
width1: "0%",
|
||||
width2: "0%",
|
||||
},
|
||||
];
|
||||
if (res.prisonCommutationParole.length > 0) {
|
||||
let arr1 = [];
|
||||
let arr2 = [];
|
||||
res.prisonCommutationParole.forEach((item) => {
|
||||
arr1.push(item["COMMUTATION_NUM"]); // 减刑数量
|
||||
arr2.push(item["PAROLE_NUM"]); //假释数量
|
||||
});
|
||||
let max1 = this.getMax(arr1); // 减刑数量
|
||||
let max2 = this.getMax(arr2); //假释数量
|
||||
res.prisonCommutationParole.forEach((item) => {
|
||||
item.width1 =
|
||||
((item["PAROLE_NUM"] / max2) * 100).toFixed(2) + "%"; // 假释长度
|
||||
item.width2 =
|
||||
((item["COMMUTATION_NUM"] / max1) * 100).toFixed(2) + "%"; // 减刑长度
|
||||
});
|
||||
this.data = res.prisonCommutationParole;
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
|
||||
this.echartObjKey = new Date().getTime() + 1;
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange(val) {
|
||||
if (val) {
|
||||
this.param.startYear = val[0];
|
||||
this.param.endYear = val[1];
|
||||
} else {
|
||||
this.param.startYear = "";
|
||||
this.param.endYear = "";
|
||||
}
|
||||
},
|
||||
// 获取X轴最大值
|
||||
getMax(arr) {
|
||||
arr.sort(function (a, b) {
|
||||
return a - b;
|
||||
});
|
||||
let max = arr[arr.length - 1]; // 计算最大值
|
||||
let num = Math.floor(max / 10) * 10 + 10; // 获取X轴最大值
|
||||
return num;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.left {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.t {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
.digifaw {
|
||||
color: #03bb62;
|
||||
font-size: 30px;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
+ li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
+ div {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.b {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
> ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
+ ul {
|
||||
padding: 0 100px;
|
||||
}
|
||||
li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2 {
|
||||
color: #43ebf7;
|
||||
font-size: 30px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:first-child {
|
||||
div:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
width: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
div:nth-child(1) {
|
||||
min-width: 60px;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
color: #27d1fc;
|
||||
width: 160px;
|
||||
text-align: center;
|
||||
}
|
||||
div:nth-child(5) {
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
&:nth-child(1) div {
|
||||
color: #fff;
|
||||
}
|
||||
.line1,
|
||||
.line2 {
|
||||
padding: 0 5px;
|
||||
p {
|
||||
transition: width 2s ease-out;
|
||||
-moz-transition: width 2s ease-out;
|
||||
-webkit-transition: width 2s ease-out;
|
||||
-o-transition: width 2s ease-out;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
}
|
||||
.line1 {
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
p {
|
||||
background-image: linear-gradient(to right, #fff480, #f49546);
|
||||
}
|
||||
}
|
||||
.line2 {
|
||||
width: 20%;
|
||||
p {
|
||||
border-radius: 0 10px 10px 0;
|
||||
background-image: linear-gradient(to right, #35ecfe, #fce190);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,697 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="menuSearch">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
value-format="yyyy-MM"
|
||||
@change="dateChange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="
|
||||
new Date().getFullYear() - 1 + '-' + (new Date().getMonth() + 1)
|
||||
"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round @click="search"
|
||||
><i class="iconfont iconchaxun"></i>查询</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="left">
|
||||
<li>
|
||||
<h2>嫌疑人性别分布</h2>
|
||||
<div class="sex">
|
||||
<div>
|
||||
<p>男</p>
|
||||
<p class="digifaw">{{ gender["MAN_REDIO"] }}<i>%</i></p>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in 24"
|
||||
:key="item"
|
||||
:class="item <= gender.proportion ? 'man' : ''"
|
||||
></li>
|
||||
</ul>
|
||||
<div>
|
||||
<p>女</p>
|
||||
<p class="digifaw">{{ gender["FEMALE_REDIO"] }}<i>%</i></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h2>嫌疑人文化程度分布</h2>
|
||||
<Echarts :key="echartObjKey1" :echartObj="echartObj1"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="middle">
|
||||
<li>
|
||||
<h2>嫌疑人身份分析</h2>
|
||||
<ul class="identity">
|
||||
<li v-for="(item, index) in criminalSuspectIdentity" :key="index">
|
||||
<div v-if="item['TYPE'].indexOf('无业人员') != -1">
|
||||
<img src="../../assets/img/intelligent/24.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('农民') != -1">
|
||||
<img src="../../assets/img/intelligent/25.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('离退休人员') != -1">
|
||||
<img src="../../assets/img/intelligent/26.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('职员') != -1">
|
||||
<img src="../../assets/img/intelligent/27.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('学生') != -1">
|
||||
<img src="../../assets/img/intelligent/28.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('务工人员') != -1">
|
||||
<img src="../../assets/img/intelligent/29.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('工人') != -1">
|
||||
<img src="../../assets/img/intelligent/30.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('国家工作人员') != -1">
|
||||
<img src="../../assets/img/intelligent/31.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('失业人员') != -1">
|
||||
<img src="../../assets/img/intelligent/32.png" />
|
||||
</div>
|
||||
<div v-else-if="item['TYPE'].indexOf('私营业主') != -1">
|
||||
<img src="../../assets/img/intelligent/33.png" />
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item.proportion }}</span
|
||||
>%
|
||||
</div>
|
||||
<p>{{ item["TYPE"] }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>嫌疑人年龄分布</h2>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj2"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="right">
|
||||
<li>
|
||||
<h2>案由分析</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<span>案由</span>
|
||||
<span>数量(人)</span>
|
||||
</li>
|
||||
<li v-for="(item, i) in data" :key="i">
|
||||
<span style="color: #27d1fc">{{ item["TYPE"] }}</span>
|
||||
<p><i :style="'width:' + item.width"></i></p>
|
||||
<span>{{ item["CASE_NUM"] | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>有期徒刑量刑分析</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<span>量刑</span>
|
||||
<span>数量(人)</span>
|
||||
</li>
|
||||
<li v-for="(item, i) in data2" :key="i">
|
||||
<span style="color: #27d1fc">{{ item["TYPE"] }}</span>
|
||||
<p><i :style="'width:' + item.width"></i></p>
|
||||
<span>{{ item["CASE_NUM"] | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echarts from "@/components/echarts";
|
||||
import {
|
||||
criminalSuspectGender,
|
||||
criminalSuspectEdu,
|
||||
criminalSuspectFixedTermImprisonment,
|
||||
criminalSuspectActionCause,
|
||||
criminalSuspectIdentity,
|
||||
criminalSuspectAge,
|
||||
} from "@/api/intelligentApi";
|
||||
import {createOperationLog} from "@/api/api"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
echartObjKey1: "echartObjKey1",
|
||||
echartObjKey2: "echartObjKey2",
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() - 8.64e6;
|
||||
},
|
||||
},
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
// 嫌疑人身份分析
|
||||
criminalSuspectIdentity: [],
|
||||
// 性别
|
||||
gender: { MAN_REDIO: 0, FEMALE_REDIO: 0, proportion: 24 },
|
||||
date: "",
|
||||
data: [],
|
||||
data2: [],
|
||||
// 嫌疑人文化程度分布
|
||||
echartObj1: {
|
||||
color: [
|
||||
"#34dbe0",
|
||||
"#2d95ff",
|
||||
"#DC8AB5",
|
||||
"#d3e352",
|
||||
"#2ae29e",
|
||||
"#af7dff",
|
||||
"#e83828",
|
||||
], //图例颜色
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.seriesName +
|
||||
"<br>" +
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人" +
|
||||
"(" +
|
||||
param.percent +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: require("../../assets/img/cult/img7.png"),
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
left: "center", // 相对父元素居中
|
||||
top: "center",
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: "0",
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "嫌疑人文化程度分布",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
data: [],
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inner", //标签的位置
|
||||
color: "#fff",
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "嫌疑人文化程度分布",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.name +
|
||||
"\n" +
|
||||
this.formatNum(param.value) +
|
||||
"人"
|
||||
);
|
||||
},
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
// 边框的设置
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "35%"],
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 嫌疑人年龄分布
|
||||
echartObj2: {
|
||||
color: [
|
||||
"#34dbe0",
|
||||
"#2d95ff",
|
||||
"#DC8AB5",
|
||||
"#d3e352",
|
||||
"#2ae29e",
|
||||
"#af7dff",
|
||||
"#e83828",
|
||||
], //图例颜色
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.seriesName +
|
||||
"<br>" +
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人" +
|
||||
"(" +
|
||||
param.percent +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: "0",
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "嫌疑人年龄分布",
|
||||
type: "pie",
|
||||
top: 20,
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
data: [],
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inner", //标签的位置
|
||||
color: "#fff",
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "嫌疑人年龄分布",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "60%"],
|
||||
top: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.name +
|
||||
"\n" +
|
||||
this.formatNum(param.value) +
|
||||
"人"
|
||||
);
|
||||
},
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
// 边框的设置
|
||||
center: ["50%", "50%"],
|
||||
radius: ["30%", "35%"],
|
||||
type: "pie",
|
||||
top: 20,
|
||||
animationDuration: 2000,
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echarts,
|
||||
},
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let pointParams ={
|
||||
opeLogExceptionInfo: '进入智能办案专题模块查询了犯罪嫌疑人数据',//日志描述
|
||||
opeLogUserAccount:this.$cookies.get('username'),//用户账户
|
||||
opeLogSystem:"BJCM-DSJ",//系统编码
|
||||
opeLogStatus: 1,
|
||||
opeLogIp:""
|
||||
}
|
||||
createOperationLog(pointParams).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
// 性别
|
||||
criminalSuspectGender(this.param)
|
||||
.then((res) => {
|
||||
this.gender = {
|
||||
MAN_REDIO: 0,
|
||||
FEMALE_REDIO: 0,
|
||||
proportion: 24,
|
||||
};
|
||||
|
||||
if (JSON.stringify(res) != "{}") {
|
||||
this.gender = res;
|
||||
this.gender["MAN_REDIO"] = res["MAN_REDIO"] * 100;
|
||||
this.gender["FEMALE_REDIO"] = res["FEMALE_REDIO"] * 100;
|
||||
this.gender.proportion = parseInt(this.gender["MAN_REDIO"] * 0.24);
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 文化程度分布
|
||||
criminalSuspectEdu(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj1.series[0].data = res.criminalSuspectEdu.map(
|
||||
(item) => {
|
||||
return {
|
||||
name: item["TYPE"],
|
||||
value: item["PEOPLE_NUM"],
|
||||
};
|
||||
}
|
||||
);
|
||||
this.echartObj1.series[1].data = res.criminalSuspectEdu.map(
|
||||
(item) => {
|
||||
return {
|
||||
name: item["TYPE"],
|
||||
value: item["PEOPLE_NUM"],
|
||||
};
|
||||
}
|
||||
);
|
||||
this.echartObjKey1 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
//有期徒刑量刑分析
|
||||
criminalSuspectFixedTermImprisonment(this.param)
|
||||
.then((res) => {
|
||||
this.data2 = [{ width: 0, TYPE: "暂无数据", CASE_NUM: 0 }];
|
||||
if (res.criminalSuspectFixedTermImprisonment.length > 0) {
|
||||
let max = this.getMax([
|
||||
...res.criminalSuspectFixedTermImprisonment,
|
||||
]);
|
||||
res.criminalSuspectFixedTermImprisonment.forEach((item) => {
|
||||
item.width = ((item["CASE_NUM"] / max) * 100).toFixed(2) + "%";
|
||||
});
|
||||
this.data2 = res.criminalSuspectFixedTermImprisonment;
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 案由分析
|
||||
criminalSuspectActionCause(this.param)
|
||||
.then((res) => {
|
||||
this.data = [{ width: 0, TYPE: "暂无数据", CASE_NUM: 0 }];
|
||||
if (res.criminalSuspectActionCause.length > 0) {
|
||||
let max = this.getMax([...res.criminalSuspectActionCause]);
|
||||
res.criminalSuspectActionCause.forEach((item) => {
|
||||
item.width = ((item["CASE_NUM"] / max) * 100).toFixed(2) + "%";
|
||||
});
|
||||
this.data = res.criminalSuspectActionCause;
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 犯罪嫌疑人身份分析
|
||||
criminalSuspectIdentity(this.param)
|
||||
.then((res) => {
|
||||
let total = 0;
|
||||
this.criminalSuspectIdentity = res.criminalSuspectIdentity;
|
||||
this.criminalSuspectIdentity.forEach((item) => {
|
||||
total += item["NUM"];
|
||||
});
|
||||
this.criminalSuspectIdentity.forEach((item) => {
|
||||
item.proportion = ((item["NUM"] / total) * 100).toFixed(2);
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 犯罪嫌疑人年龄分布
|
||||
criminalSuspectAge(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj2.series[0].data = res.criminalSuspectAge.map(
|
||||
(item) => {
|
||||
return { name: item["TYPE"], value: item["NUM"] };
|
||||
}
|
||||
);
|
||||
this.echartObj2.series[1].data = res.criminalSuspectAge.map(
|
||||
(item) => {
|
||||
return { name: item["TYPE"], value: item["NUM"] };
|
||||
}
|
||||
);
|
||||
this.echartObjKey2 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange(val) {
|
||||
if (val) {
|
||||
this.param.startYear = val[0];
|
||||
this.param.endYear = val[1];
|
||||
} else {
|
||||
this.param.startYear = "";
|
||||
this.param.endYear = "";
|
||||
}
|
||||
},
|
||||
// 获取X轴最大值
|
||||
getMax(arr) {
|
||||
arr.sort(function (a, b) {
|
||||
return a["CASE_NUM"] - b["CASE_NUM"];
|
||||
});
|
||||
let max = arr[arr.length - 1]["CASE_NUM"]; // 计算最大值
|
||||
let num = Math.floor(max / 10) * 10 + 10; // 获取X轴最大值
|
||||
return num;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
.left,
|
||||
.middle,
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2 {
|
||||
color: #43ebf7;
|
||||
font-size: 26px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left {
|
||||
width: 30%;
|
||||
.sex {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
padding: 40px 20px;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #41bcff;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
p {
|
||||
font-size: 60px;
|
||||
}
|
||||
p + p {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
ul + div {
|
||||
color: #fca314;
|
||||
}
|
||||
> ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
> li.man {
|
||||
background: url(../../assets/img/intelligent/21.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
> li {
|
||||
width: 12%;
|
||||
height: 33%;
|
||||
box-sizing: border-box;
|
||||
background: url(../../assets/img/intelligent/22.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle {
|
||||
flex: 1;
|
||||
margin: 0 100px;
|
||||
display: flex;
|
||||
.identity {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 18%;
|
||||
height: 50%;
|
||||
background: url(../../assets/img/intelligent/23.png) no-repeat;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #5ad2ff;
|
||||
div {
|
||||
span {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
background: #1e4698;
|
||||
border: 1px solid #60c1ff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 30%;
|
||||
li > ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
span:last-child {
|
||||
width: 60px;
|
||||
}
|
||||
p {
|
||||
flex: 1;
|
||||
margin: 0 5px;
|
||||
i {
|
||||
transition: width 2s ease-out;
|
||||
-moz-transition: width 2s ease-out;
|
||||
-webkit-transition: width 2s ease-out;
|
||||
-o-transition: width 2s ease-out;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
border-radius: 15px;
|
||||
background-image: linear-gradient(to right, #36ecfe, #fde191);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li:nth-child(2) > ul li p i {
|
||||
background-image: linear-gradient(to right, #e05a30, #ff9c70);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,61 +1,91 @@
|
||||
<!-- 智能办案专题 -->
|
||||
<template>
|
||||
<div class="page">
|
||||
<Header :headerObj="{title: '智能办案专题(机密)',}"/>
|
||||
<ul class="menu">
|
||||
<li v-for="(item,index) in menuList" @click="menuClick(item.path,index)" :class="menuIndex==index?'active':''" :key="index">
|
||||
<i :class="'iconfont '+ item.icon"></i>
|
||||
{{item.name}}
|
||||
</li>
|
||||
</ul>
|
||||
<router-view></router-view>
|
||||
<div class="main">
|
||||
<!-- <userStatus />-->
|
||||
<!-- <h1>首页</h1> -->
|
||||
<!-- <img class="h1" src="../../assets/img/h1.png" />-->
|
||||
<Header :headerObj="{title:'中科软养老大数据分析平台', index: '9'}"/>
|
||||
<home></home>
|
||||
<!-- <Nav />-->
|
||||
<!-- <img class="b" src="../../assets/img/1.png" alt="" />-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Header from '@/components/header'
|
||||
import home from './home.vue'
|
||||
import userStatus from "@/components/userStatus";
|
||||
import { Index } from "@/api/index";
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
name: "index",
|
||||
data: function () {
|
||||
return {
|
||||
menuIndex: 0,
|
||||
menuList: [
|
||||
{ name: '智能办案首页', icon: 'iconshouye', path: 'home' },
|
||||
{ name: '法院', icon: 'iconfayuangongzuo', path: 'court'},
|
||||
{ name: '检察院', icon: 'iconjianchayuangongzuo', path: 'procuratorate'},
|
||||
{ name: '公安', icon: 'icongongangongzuo', path: '/intelligent/publicSecurity'},
|
||||
{ name: '司法', icon: 'iconsifagongzuo', path: 'judicial'},
|
||||
{ name: '涉案财物', icon: 'iconsheancaiwu', path: 'money'},
|
||||
{ name: '减刑假释', icon: 'iconjianxing', path: 'commutation'},
|
||||
{ name: '犯罪嫌疑人', icon: 'iconxianyiren', path: 'criminalSuspect'},
|
||||
],
|
||||
}
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
},
|
||||
mounted() {
|
||||
this.menuInit()
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
// this.init();
|
||||
},
|
||||
components: {
|
||||
Header,
|
||||
home,
|
||||
userStatus,
|
||||
},
|
||||
methods: {
|
||||
menuInit: function() {
|
||||
var name = this.$route.name;
|
||||
if(name == 'publicSecurityDetail1' || name == 'publicSecurityDetail2'){
|
||||
this.menuIndex = 1
|
||||
}
|
||||
this.menuList.forEach((item,index)=>{
|
||||
item.path==name ? this.menuIndex = index : ''
|
||||
})
|
||||
init() {
|
||||
this.getData();
|
||||
},
|
||||
menuClick: function(path, index) {
|
||||
if (path && path != this.$route.name) {
|
||||
this.$router.push({ path: path })
|
||||
this.menuIndex = index;
|
||||
}
|
||||
getData() {
|
||||
Index(this.param).then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.main {
|
||||
height: 100%;
|
||||
background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
/deep/ .modal,
|
||||
/deep/ .el-icon-close {
|
||||
display: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 600;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
-webkit-line-clamp: 2;
|
||||
background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.h1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -509px;
|
||||
}
|
||||
//.b {
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// // animation:turn 10s linear infinite;
|
||||
//}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,698 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="menuSearch">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
value-format="yyyy-MM"
|
||||
@change="dateChange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="
|
||||
new Date().getFullYear() - 1 + '-' + (new Date().getMonth() + 1)
|
||||
"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round @click="search"
|
||||
><i class="iconfont iconchaxun"></i>查询</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="left">
|
||||
<li>
|
||||
<p>
|
||||
<span
|
||||
>减刑<i class="digifaw">{{
|
||||
dataSet.commutationSentenceNum | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
<span
|
||||
>假释<i class="digifaw">{{ dataSet.parole | formatNum }}</i
|
||||
>人</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
>刑满释放<i class="digifaw">{{
|
||||
dataSet.releaseAfterSentence | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
>社区入矫<i class="digifaw">{{
|
||||
dataSet.communityCorrect | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
<span
|
||||
>解除<i class="digifaw">{{
|
||||
dataSet.communityCorrectRelieve | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
>收治强制戒毒<i class="digifaw">{{
|
||||
dataSet.forceDrugDetoxification | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
<span
|
||||
>解除<i class="digifaw">{{
|
||||
dataSet.forceDrugDetoxificationRelieve | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
>承办法律援助<i class="digifaw">{{
|
||||
dataSet.legalAid | formatNum
|
||||
}}</i
|
||||
>人</span
|
||||
>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="title">减刑、假释占比分析</h3>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj1"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="middle">
|
||||
<li>
|
||||
<h3 class="title">罪犯收押趋势分析</h3>
|
||||
<Echarts :key="echartObjKey1" :echartObj="echartObj2"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="title">社区入矫、强制戒毒情况分析</h3>
|
||||
<Echarts :key="echartObjKey3" :echartObj="echartObj3"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<h3 class="title">北京各区法律援助数量</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span>区</span>
|
||||
<span>数量(件)</span>
|
||||
</li>
|
||||
<li v-for="(item, i) in data" :key="i">
|
||||
<span>{{ item.name }}</span>
|
||||
<p><i :style="'width:' + item.width"></i></p>
|
||||
<span>{{ item.value | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echarts from "@/components/echarts";
|
||||
import {
|
||||
judicialSummary,
|
||||
datainingCriminalsTend,
|
||||
commutationParoleRatio,
|
||||
legalAidNum,
|
||||
} from "@/api/intelligentApi";
|
||||
import {createOperationLog} from "@/api/api"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
echartObjKey1: "echartObjKey1",
|
||||
echartObjKey2: "echartObjKey2",
|
||||
echartObjKey3: "echartObjKey3",
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() - 8.64e6;
|
||||
},
|
||||
},
|
||||
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
// 司法汇总数据
|
||||
dataSet: {},
|
||||
date: "",
|
||||
data: [],
|
||||
// 减刑、假释占比分析
|
||||
echartObj1: {
|
||||
color: [
|
||||
"#ff7723",
|
||||
"#29b584",
|
||||
"#AF7DF3",
|
||||
"#8fdd20",
|
||||
"#DC8AB5",
|
||||
"#35e0e3",
|
||||
"#ffd200",
|
||||
], //图例颜色
|
||||
legend: {
|
||||
right: 0,
|
||||
orient: "vertical",
|
||||
top: 0,
|
||||
icon: "circle",
|
||||
itemWidth: 20, //图例的宽度
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.seriesName +
|
||||
"<br>" +
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人" +
|
||||
"(" +
|
||||
param.percent +
|
||||
"%)"
|
||||
);
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "减刑、假释占比分析",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["30%", "70%"],
|
||||
center: ["50%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
data: [],
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inner", //标签的位置
|
||||
color: "#fff",
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "减刑、假释占比分析",
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["30%", "70%"],
|
||||
center: ["50%", "50%"],
|
||||
avoidLabelOverlap: true,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
formatter: (param) => {
|
||||
return (
|
||||
param.name +
|
||||
"：" +
|
||||
this.formatNum(param.value) +
|
||||
"人"
|
||||
);
|
||||
},
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 边框的设置
|
||||
radius: ["30%", "40%"],
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(0,0,0,0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
// 罪犯收押趋势
|
||||
echartObj2: {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
right: "20",
|
||||
icon: "circle",
|
||||
itemWidth: 20, //图例的宽度
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "30",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位(人)",
|
||||
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",
|
||||
animationDuration: 2000,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
color: "#3aebd5", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#3aebd5", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
symbol: "circle", //折线拐点实心圆
|
||||
symbolSize: 10,
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "同比",
|
||||
type: "line",
|
||||
animationDuration: 2000,
|
||||
stack: "总量",
|
||||
smooth: true,
|
||||
data: [],
|
||||
symbol: "circle", //折线拐点实心圆
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
color: "#f19634", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#f19634", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 社区入矫、强制戒毒情况分析
|
||||
echartObj3: {
|
||||
color: ["#1179ff", "#f3a858", "#20f292"], //图例颜色
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
position: "inside",
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: "10",
|
||||
right: "20",
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "40",
|
||||
left: "20",
|
||||
right: "40",
|
||||
bottom: "10",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
// name: '区域',
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: ["社区入矫", "解除", "强制戒毒", "解除"],
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位(人)",
|
||||
type: "value",
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#355184",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
animationDuration: 2000,
|
||||
barMaxWidth: "20",
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
showBackground: true, //柱图显示背景色
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// barBorderRadius: [5,5,0,0]
|
||||
// }
|
||||
// }
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Echarts,
|
||||
},
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let pointParams ={
|
||||
opeLogExceptionInfo: '进入智能办案专题模块查询了司法数据',//日志描述
|
||||
opeLogUserAccount:this.$cookies.get('username'),//用户账户
|
||||
opeLogSystem:"BJCM-DSJ",//系统编码
|
||||
opeLogStatus: 1,
|
||||
opeLogIp:""
|
||||
}
|
||||
createOperationLog(pointParams).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
// 司法汇总数据
|
||||
judicialSummary(this.param)
|
||||
.then((res) => {
|
||||
this.dataSet = res;
|
||||
// 社区入矫、强制戒毒情况分析
|
||||
this.echartObj3.series[0].data = [
|
||||
res.communityCorrect,
|
||||
res.communityCorrectRelieve,
|
||||
res.forceDrugDetoxification,
|
||||
res.forceDrugDetoxificationRelieve,
|
||||
];
|
||||
this.echartObjKey3 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 罪犯收押趋势
|
||||
datainingCriminalsTend(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj2.xAxis[0].data = [];
|
||||
this.echartObj2.series[0].data = []; // 数量
|
||||
this.echartObj2.series[1].data = []; // 同比
|
||||
res.datainingCriminalsTendList.forEach((item) => {
|
||||
this.echartObj2.xAxis[0].data.push(item["TYPE"]);
|
||||
this.echartObj2.series[0].data.push(
|
||||
item["DATAINING_CRIMINALS_NUM"]
|
||||
);
|
||||
this.echartObj2.series[1].data.push(
|
||||
item["DATAINING_CRIMINALS_SANME_PERIOD"]
|
||||
);
|
||||
});
|
||||
this.echartObjKey1 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// -减刑、假释占比分析
|
||||
commutationParoleRatio(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj1.series[0].data = [];
|
||||
this.echartObj1.series[1].data = [];
|
||||
if (JSON.stringify(res) != "{}" && res) {
|
||||
this.echartObj1.series[0].data = [
|
||||
{ value: res["DATAINING_CRIMINALS_NUM"], name: "收押犯罪" },
|
||||
{ value: res["COMMUTATION_SENTENCE_NUM"], name: "减刑" },
|
||||
{ value: res["PAROLE"], name: "假释" },
|
||||
];
|
||||
this.echartObj1.series[1].data = [
|
||||
{ value: res["DATAINING_CRIMINALS_NUM"], name: "收押犯罪" },
|
||||
{ value: res["COMMUTATION_SENTENCE_NUM"], name: "减刑" },
|
||||
{ value: res["PAROLE"], name: "假释" },
|
||||
];
|
||||
}
|
||||
this.echartObjKey2 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
|
||||
// 北京各区法律援助数量
|
||||
legalAidNum(this.param)
|
||||
.then((res) => {
|
||||
let data = [],
|
||||
max = 0;
|
||||
if (res.legalAidNumList.length) {
|
||||
max = this.getMax([...res.legalAidNumList]);
|
||||
}
|
||||
res.listclass.forEach((item, index) => {
|
||||
data[index] = {
|
||||
name: item,
|
||||
value: 0,
|
||||
width: "0%",
|
||||
};
|
||||
if (res.legalAidNumList.length > 0) {
|
||||
res.legalAidNumList.forEach((i) => {
|
||||
if (item == i["AREA_NAME"]) {
|
||||
data[index].value = i["LEGAL_AID_NUM"];
|
||||
data[index].width =
|
||||
((i["LEGAL_AID_NUM"] / max) * 100).toFixed(2) + "%";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.data = data;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
},
|
||||
// 获取X轴最大值
|
||||
getMax(arr) {
|
||||
arr.sort(function (a, b) {
|
||||
return a["LEGAL_AID_NUM"] - b["LEGAL_AID_NUM"];
|
||||
});
|
||||
let max = arr[arr.length - 1]["LEGAL_AID_NUM"]; // 计算最大值
|
||||
let num = Math.floor(max / 10) * 10 + 10; // 获取X轴最大值
|
||||
return num;
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange(val) {
|
||||
if (val) {
|
||||
this.param.startYear = val[0];
|
||||
this.param.endYear = val[1];
|
||||
} else {
|
||||
this.param.startYear = "";
|
||||
this.param.endYear = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
padding: 20px 50px;
|
||||
.left,
|
||||
.middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
width: 30%;
|
||||
li:nth-child(1) {
|
||||
justify-content: space-around;
|
||||
p {
|
||||
background: url(../../assets/img/intelligent/15.png) no-repeat center;
|
||||
text-align: center;
|
||||
background-size: contain;
|
||||
min-height: 36px;
|
||||
span + span {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.digifaw {
|
||||
font-size: 22px;
|
||||
color: #08d778;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle {
|
||||
flex: 1;
|
||||
margin: 0 100px;
|
||||
}
|
||||
.right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
min-width: 60px;
|
||||
}
|
||||
span:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
p {
|
||||
flex: 1;
|
||||
i {
|
||||
transition: width 2s ease-out;
|
||||
-moz-transition: width 2s ease-out;
|
||||
-webkit-transition: width 2s ease-out;
|
||||
-o-transition: width 2s ease-out;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
border-radius: 15px;
|
||||
background-image: linear-gradient(to right, #36ecfe, #fde191);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h3.title {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color: #43ebf6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,999 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="menuSearch">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
value-format="yyyy-MM"
|
||||
@change="dateChange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="
|
||||
new Date().getFullYear() - 1 + '-' + (new Date().getMonth() + 1)
|
||||
"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" @click="search" round
|
||||
><i class="iconfont iconchaxun"></i>查询</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="left">
|
||||
<div class="t">
|
||||
<h2>审查逮捕</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<p><img src="../../assets/img/intelligent/1.png" /></p>
|
||||
<p>批准逮捕</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #5ad2ff">{{
|
||||
approvalArrestPersonCase["REQUESTARRESTCASENUM2"] | formatNum
|
||||
}}</span
|
||||
>件
|
||||
</p>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #5bd87b">{{
|
||||
approvalArrestPersonCase["APPROVALARRESTPERSON"] | formatNum
|
||||
}}</span
|
||||
>人
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<p><img src="../../assets/img/intelligent/2.png" /></p>
|
||||
<p>不捕</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #ff9d47">{{
|
||||
approvalArrestPersonCase["UNAPPROVALARRESTCASE"] | formatNum
|
||||
}}</span
|
||||
>件
|
||||
</p>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #dc8ab5">{{
|
||||
approvalArrestPersonCase["UNAPPROVALARRESTPERSON"] | formatNum
|
||||
}}</span
|
||||
>人
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<p><img src="../../assets/img/intelligent/3.png" /></p>
|
||||
<p>监督</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #5ad2ff">{{
|
||||
approvalArrestPersonCase["PROCURATORATESUPERVISE"] | formatNum
|
||||
}}</span
|
||||
>件次
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<p class="echart_title">
|
||||
不捕数量趋势分析
|
||||
<!-- <span class="detail">查看></span> -->
|
||||
</p>
|
||||
<Echarts :key="echartObjKey1" :echartObj="echartObj1"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<p class="echart_title">不捕原因分析</p>
|
||||
<Echarts :key="echartObjKey3" :echartObj="echartObj2"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="t">
|
||||
<h2>审查起诉</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<div>
|
||||
<p><img src="../../assets/img/intelligent/4.png" /></p>
|
||||
<p>起诉</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #da9bff">{{
|
||||
prosecutionPersonCase["PROSECUTIONCASE"] | formatNum
|
||||
}}</span
|
||||
>件
|
||||
</p>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #7e7fe4">{{
|
||||
prosecutionPersonCase["PROSECUTIONPERSON"] | formatNum
|
||||
}}</span
|
||||
>人
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<p><img src="../../assets/img/intelligent/5.png" /></p>
|
||||
<p>未起诉</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #60bdff">{{
|
||||
prosecutionPersonCase["UNROSECUTIONCASE"] | formatNum
|
||||
}}</span
|
||||
>件
|
||||
</p>
|
||||
<p>
|
||||
<span class="digifaw" style="color: #559ae7">{{
|
||||
prosecutionPersonCase["UNPROSECUTIONPSERSON"] | formatNum
|
||||
}}</span
|
||||
>人
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<p class="echart_title">
|
||||
不起诉案件趋势分析
|
||||
<!-- <span class="detail">查看></span> -->
|
||||
</p>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj3"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<p class="echart_title">不起诉原因分析</p>
|
||||
<Echarts :key="echartObjKey4" :echartObj="echartObj4"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2 class="title">各区审查逮捕、审查起诉数量(件)</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<div>起诉/不起诉(件)</div>
|
||||
<div>区</div>
|
||||
<div>逮捕/不捕数量(件)</div>
|
||||
</li>
|
||||
<li v-for="(item, index) in data" :key="index">
|
||||
<div>
|
||||
<span>{{ item["PROSECUTIONNUM"] | formatNum }}</span
|
||||
>/{{ item["UNPROSECUTIONRNUM"] | formatNum }}
|
||||
</div>
|
||||
<div class="line1">
|
||||
<p :style="'width:' + item.width1">
|
||||
<i :style="'width:' + item.subWidth3"></i>
|
||||
<i :style="'width:' + item.subWidth4"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div style="width:6em; text-align: center">{{ item.name }}</div>
|
||||
<div class="line2">
|
||||
<p :style="'width:' + item.width">
|
||||
<i :style="'width:' + item.subWidth"></i>
|
||||
<i :style="'width:' + item.subWidth2"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ item["ARRESTNUM"] | formatNum }}</span
|
||||
>/{{ item["ARRESTNUM2"] | formatNum }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echarts from "@/components/echarts";
|
||||
import {
|
||||
approvalArrestPersonCase,
|
||||
procuratorateArrestProsecutionNum,
|
||||
procuratorateUnArrestReason,
|
||||
procuratorateUnProsecutionReason,
|
||||
prosecutionPersonCase,
|
||||
unApprovalArrestPerson,
|
||||
unProsecutionPserson,
|
||||
} from "@/api/intelligentApi";
|
||||
import {createOperationLog} from "@/api/api"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
echartObjKey1: "echartObjKey1",
|
||||
echartObjKey2: "echartObjKey2",
|
||||
echartObjKey3: "echartObjKey3",
|
||||
echartObjKey4: "echartObjKey4",
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() - 8.64e6;
|
||||
},
|
||||
},
|
||||
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
date: "",
|
||||
// 审查逮捕
|
||||
approvalArrestPersonCase: {},
|
||||
// 审查起诉
|
||||
prosecutionPersonCase: {},
|
||||
// 各区审查逮捕、审查起诉数量
|
||||
data: [],
|
||||
// 不捕量趋势分析
|
||||
echartObj1: {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
top: "0",
|
||||
right: "20",
|
||||
icon: "circle",
|
||||
itemWidth: 20, //图例的宽度
|
||||
textStyle: {
|
||||
color: "#ffffff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "40",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
rotate: 50,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位(件)",
|
||||
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",
|
||||
animationDuration: 2000,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
color: "#3aebd5", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#3aebd5", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
symbol: "circle", //折线拐点实心圆
|
||||
symbolSize: 10,
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "同比数量",
|
||||
type: "line",
|
||||
animationDuration: 2000,
|
||||
stack: "总量",
|
||||
smooth: true,
|
||||
data: [],
|
||||
symbol: "circle", //折线拐点实心圆
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
color: "#f19634", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#f19634", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 不捕原因分析
|
||||
echartObj2: {
|
||||
color: ["#20f292"], //图例颜色
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
radius: "70%",
|
||||
indicator: [{ text: "", max: 0 }],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "不捕原因分析",
|
||||
type: "radar",
|
||||
animationDuration: 2000,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
areaStyle: {},
|
||||
data: [
|
||||
{
|
||||
value: [],
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
position: "inside",
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value) + "件";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 不起诉案件趋势分析
|
||||
echartObj3: {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
top: "0",
|
||||
right: "20",
|
||||
icon: "circle",
|
||||
itemWidth: 20, //图例的宽度
|
||||
textStyle: {
|
||||
color: "#ffffff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "40",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
rotate: 50,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位(件)",
|
||||
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",
|
||||
animationDuration: 2000,
|
||||
smooth: true,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
color: "#3aebd5", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#3aebd5", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
symbol: "circle", //折线拐点实心圆
|
||||
symbolSize: 10,
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "同比数量",
|
||||
type: "line",
|
||||
animationDuration: 2000,
|
||||
stack: "总量",
|
||||
smooth: true,
|
||||
data: [],
|
||||
symbol: "circle", //折线拐点实心圆
|
||||
symbolSize: 10,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
color: "#f19634", //折点颜色
|
||||
lineStyle: {
|
||||
color: "#f19634", //折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 不起诉原因分析
|
||||
echartObj4: {
|
||||
color: ["#20f292"], //图例颜色
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
radar: [
|
||||
{
|
||||
radius: "70%",
|
||||
indicator: [{ text: "", max: 0 }],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "不起诉原因分析",
|
||||
type: "radar",
|
||||
animationDuration: 2000,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
areaStyle: {},
|
||||
data: [
|
||||
{
|
||||
value: [],
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
position: "inside",
|
||||
color: "#fff",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value) + "件";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
components: {
|
||||
Echarts,
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let pointParams ={
|
||||
opeLogExceptionInfo: '进入智能办案专题模块查询了检察院数据',//日志描述
|
||||
opeLogUserAccount:this.$cookies.get('username'),//用户账户
|
||||
opeLogSystem:"BJCM-DSJ",//系统编码
|
||||
opeLogStatus: 1,
|
||||
opeLogIp:""
|
||||
}
|
||||
createOperationLog(pointParams).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
// 审查逮捕
|
||||
approvalArrestPersonCase(this.param)
|
||||
.then((res) => {
|
||||
this.approvalArrestPersonCase = {
|
||||
REQUESTARRESTCASENUM2: 0,
|
||||
APPROVALARRESTPERSON: 0,
|
||||
UNAPPROVALARRESTCASE: 0,
|
||||
UNAPPROVALARRESTPERSON: 0,
|
||||
PROCURATORATESUPERVISE: 0,
|
||||
};
|
||||
if (
|
||||
JSON.stringify(res.approvalArrestPersonCase) != "{}" &&
|
||||
res.approvalArrestPersonCase
|
||||
) {
|
||||
this.approvalArrestPersonCase = res.approvalArrestPersonCase;
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 各区审查逮捕、审查起诉数量
|
||||
procuratorateArrestProsecutionNum(this.param)
|
||||
.then((res) => {
|
||||
let data = [];
|
||||
res.listclass.forEach((item, index) => {
|
||||
data[index] = {
|
||||
name: item,
|
||||
ARRESTNUM: 0,
|
||||
ARRESTNUM2: 0,
|
||||
PROSECUTIONNUM: 0,
|
||||
UNPROSECUTIONRNUM: 0,
|
||||
width: "0%",
|
||||
width1: "0%",
|
||||
subWidth: "0%",
|
||||
subWidth2: "0%",
|
||||
subWidth3: "0%",
|
||||
subWidth4: "0%",
|
||||
};
|
||||
if (res.procuratorateArrestProsecutionNum.length > 0) {
|
||||
res.procuratorateArrestProsecutionNum.forEach((i) => {
|
||||
if (item == i["AREACODENAME"]) {
|
||||
data[index]["ARRESTNUM"] = i["ARRESTNUM"]; //逮捕
|
||||
data[index]["ARRESTNUM2"] = i["ARRESTNUM2"]; //不捕
|
||||
data[index]["PROSECUTIONNUM"] = i["PROSECUTIONNUM"]; // 起诉
|
||||
data[index]["UNPROSECUTIONRNUM"] = i["UNPROSECUTIONRNUM"]; //不起诉
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
let arr = [],
|
||||
arr1 = [];
|
||||
data.forEach((item) => {
|
||||
arr.push(item["ARRESTNUM"] + item["ARRESTNUM2"]);
|
||||
arr1.push(item["PROSECUTIONNUM"] + item["UNPROSECUTIONRNUM"]);
|
||||
});
|
||||
let max = this.getMax([...arr]);
|
||||
let max1 = this.getMax([...arr1]);
|
||||
data.forEach((item) => {
|
||||
if (max) {
|
||||
item.width =
|
||||
(
|
||||
((item["ARRESTNUM"] + item["ARRESTNUM2"]) / max) *
|
||||
100
|
||||
).toFixed(2) + "%";
|
||||
}
|
||||
if (max1) {
|
||||
item.width1 =
|
||||
(
|
||||
((item["PROSECUTIONNUM"] + item["UNPROSECUTIONRNUM"]) /
|
||||
max1) *
|
||||
100
|
||||
).toFixed(2) + "%";
|
||||
}
|
||||
|
||||
item.subWidth =
|
||||
(
|
||||
(item["ARRESTNUM"] / (item["ARRESTNUM"] + item["ARRESTNUM2"])) *
|
||||
100
|
||||
).toFixed(2) + "%";
|
||||
item.subWidth2 =
|
||||
(
|
||||
(item["ARRESTNUM2"] /
|
||||
(item["ARRESTNUM"] + item["ARRESTNUM2"])) *
|
||||
100
|
||||
).toFixed(2) + "%";
|
||||
item.subWidth3 =
|
||||
(
|
||||
(item["PROSECUTIONNUM"] /
|
||||
(item["PROSECUTIONNUM"] + item["UNPROSECUTIONRNUM"])) *
|
||||
100
|
||||
).toFixed(2) + "%";
|
||||
item.subWidth4 =
|
||||
(
|
||||
(item["UNPROSECUTIONRNUM"] /
|
||||
(item["PROSECUTIONNUM"] + item["UNPROSECUTIONRNUM"])) *
|
||||
100
|
||||
).toFixed(2) + "%";
|
||||
});
|
||||
this.data = data;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 不捕原因分析
|
||||
procuratorateUnArrestReason(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj2.radar[0].indicator = [{ text: "暂无数据", max: 0 }];
|
||||
this.echartObj2.series[0].data[0].value = [0];
|
||||
if (res.procuratorateUnArrestReason.length > 0) {
|
||||
let arr = [];
|
||||
res.procuratorateUnArrestReason.forEach((item) => {
|
||||
arr.push(item["NUM"]);
|
||||
});
|
||||
let max = this.getMax([...arr]);
|
||||
this.echartObj2.radar[0].indicator = res.procuratorateUnArrestReason.map(
|
||||
(item) => {
|
||||
return { text: item["UNARRESTREASONNAME"], max: max };
|
||||
}
|
||||
);
|
||||
this.echartObj2.series[0].data[0].value = arr;
|
||||
}
|
||||
this.echartObjKey3 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 不起诉原因分析
|
||||
procuratorateUnProsecutionReason(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj4.radar[0].indicator = [{ text: "暂无数据", max: 0 }];
|
||||
this.echartObj4.series[0].data[0].value = [0];
|
||||
if (res.procuratorateUnProsecutionReason.length > 0) {
|
||||
let arr = [];
|
||||
res.procuratorateUnProsecutionReason.forEach((item) => {
|
||||
arr.push(item["NUM"]);
|
||||
});
|
||||
let max = this.getMax([...arr]);
|
||||
this.echartObj4.radar[0].indicator = res.procuratorateUnProsecutionReason.map(
|
||||
(item) => {
|
||||
return { text: item["UNPROSECUTIONREASONNAME"], max: max };
|
||||
}
|
||||
);
|
||||
this.echartObj4.series[0].data[0].value = arr;
|
||||
}
|
||||
this.echartObjKey4 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 审查起诉
|
||||
prosecutionPersonCase(this.param)
|
||||
.then((res) => {
|
||||
this.prosecutionPersonCase = {
|
||||
PROSECUTIONCASE: 0,
|
||||
PROSECUTIONPERSON: 0,
|
||||
UNROSECUTIONCASE: 0,
|
||||
UNPROSECUTIONPSERSON: 0,
|
||||
};
|
||||
if (
|
||||
JSON.stringify(res.prosecutionPersonCase) != "{}" &&
|
||||
res.prosecutionPersonCase
|
||||
) {
|
||||
this.prosecutionPersonCase = res.prosecutionPersonCase;
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 不捕量趋势分析
|
||||
unApprovalArrestPerson(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj1.xAxis[0].data = [];
|
||||
this.echartObj1.series[0].data = [];
|
||||
this.echartObj1.series[1].data = [];
|
||||
res.unApprovalArrestPerson.forEach((item) => {
|
||||
this.echartObj1.xAxis[0].data.push(item["YEARMONTH"]);
|
||||
this.echartObj1.series[0].data.push(item["UNAPPROVALARRESTPERSON"]); // 数量
|
||||
this.echartObj1.series[1].data.push(
|
||||
item["COLUMN1UNAPPROVALARRESTCASESAMEPERIOD"]
|
||||
); //同比
|
||||
});
|
||||
this.echartObjKey1 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 不起诉案件趋势分析
|
||||
unProsecutionPserson(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj3.xAxis[0].data = [];
|
||||
this.echartObj3.series[0].data = [];
|
||||
this.echartObj3.series[1].data = [];
|
||||
res.unProsecutionPserson.forEach((item) => {
|
||||
this.echartObj3.xAxis[0].data.push(item["YEARMONTH"]);
|
||||
this.echartObj3.series[0].data.push(item["UNPROSECUTIONPSERSON"]); // 数量
|
||||
this.echartObj3.series[1].data.push(
|
||||
item["UNPROSECUTIONPSERSONSAMEPERIOD"]
|
||||
); //同比
|
||||
});
|
||||
this.echartObjKey2 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange(val) {
|
||||
if (val) {
|
||||
this.param.startYear = val[0];
|
||||
this.param.endYear = val[1];
|
||||
} else {
|
||||
this.param.startYear = "";
|
||||
this.param.endYear = "";
|
||||
}
|
||||
},
|
||||
// 获取X轴最大值
|
||||
getMax(arr) {
|
||||
arr.sort(function (a, b) {
|
||||
return a - b;
|
||||
});
|
||||
let max = arr[arr.length - 1]; // 计算最大值
|
||||
let num = Math.floor(max / 10) * 10 + 10; // 获取X轴最大值
|
||||
return num;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
padding: 20px 50px;
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
color: #43ebf7;
|
||||
}
|
||||
.left,
|
||||
.middle {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.t {
|
||||
> ul {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
> li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
p .digifaw {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
> div + div {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle {
|
||||
margin: 0 50px;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
ul {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div:nth-child(1) {
|
||||
width: 18%;
|
||||
color: #5999ff;
|
||||
span {
|
||||
color: #7e6dff;
|
||||
}
|
||||
}
|
||||
div:nth-child(5) {
|
||||
width: 18%;
|
||||
text-align: right;
|
||||
color: #f59c4a;
|
||||
span {
|
||||
color: #88febf;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) div {
|
||||
color: #fff;
|
||||
}
|
||||
.line1,
|
||||
.line2 {
|
||||
width: 30%;
|
||||
padding: 0 5px;
|
||||
p {
|
||||
display: inline-block;
|
||||
transition: width 2s ease-out;
|
||||
-moz-transition: width 2s ease-out;
|
||||
-webkit-transition: width 2s ease-out;
|
||||
-o-transition: width 2s ease-out;
|
||||
i {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
&:nth-child(2) {
|
||||
border-radius: 0 10px 10px 0;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background: #0f2246;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -2px;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.line1 {
|
||||
text-align: right;
|
||||
i {
|
||||
background-image: linear-gradient(to right, #7e6dff, #a99eff);
|
||||
&:nth-child(2) {
|
||||
background-image: linear-gradient(to right, #61c0ff, #5999ff);
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background: #0f2246;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -2px;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.line2 i {
|
||||
background-image: linear-gradient(to right, #36edfe, #88febf);
|
||||
&:nth-child(2) {
|
||||
background-image: linear-gradient(to right, #feeb7b, #f59c4a);
|
||||
}
|
||||
}
|
||||
span:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,951 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="menuSearch">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
value-format="yyyy-MM"
|
||||
@change="dateChange"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptions"
|
||||
:default-value="
|
||||
new Date().getFullYear() - 1 + '-' + (new Date().getMonth() + 1)
|
||||
"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round @click="search"
|
||||
><i class="iconfont iconchaxun"></i>查询</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul class="left">
|
||||
<li>
|
||||
<h3 class="title">街(乡)镇发案数量TOP10</h3>
|
||||
<div class="top10">
|
||||
<ul>
|
||||
<li>
|
||||
<span>所属区</span>
|
||||
<span>所属街(乡)镇</span>
|
||||
<span>数量(件)</span>
|
||||
</li>
|
||||
<li v-for="(item, index) in townshipCaseTop101" :key="index">
|
||||
<span
|
||||
><i>{{ index + 1 }}</i
|
||||
>{{ item["AREACODENAME"] }}</span
|
||||
>
|
||||
<span>{{ item["TOWNSHIPCODENAME"] }}</span>
|
||||
<span>{{ item["CASENUM"] | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="townshipCaseTop102.length>0">
|
||||
<li>
|
||||
<span>所属区</span>
|
||||
<span>所属街(乡)镇</span>
|
||||
<span>数量(件)</span>
|
||||
</li>
|
||||
<li v-for="(item, index) in townshipCaseTop102" :key="index">
|
||||
<span
|
||||
><i>{{ index + 6 }}</i
|
||||
>{{ item["AREACODENAME"] }}</span
|
||||
>
|
||||
<span>{{ item["TOWNSHIPCODENAME"] }}</span>
|
||||
<span>{{ item["CASENUM"] | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="title">
|
||||
刑事案件趋势分析
|
||||
<!-- <span @click="$router.push('publicSecurityDetail1')"
|
||||
>查看></span
|
||||
> -->
|
||||
</h3>
|
||||
<Echarts :key="echartObjKey1" :echartObj="echartObj1"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="middle">
|
||||
<li>
|
||||
<h3 class="title">
|
||||
案由数量TOP10
|
||||
<!-- <span @click="$router.push('publicSecurityDetail1')"
|
||||
>查看></span
|
||||
> -->
|
||||
</h3>
|
||||
<div class="top10">
|
||||
<ul>
|
||||
<li>
|
||||
<span>案由</span>
|
||||
<span>发案案量(件)</span>
|
||||
</li>
|
||||
<li v-for="(item, index) in causeActionNumTop101" :key="index">
|
||||
<span
|
||||
><i>{{ index + 1 }}</i
|
||||
>{{ item["CAUSEACTIONCODENAME"] }}</span
|
||||
>
|
||||
<span>{{ item["CASENUM"] | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<span>案由</span>
|
||||
<span>发案案量(件)</span>
|
||||
</li>
|
||||
<li v-for="(item, index) in causeActionNumTop102" :key="index">
|
||||
<span
|
||||
><i>{{ index + 6 }}</i
|
||||
>{{ item["CAUSEACTIONCODENAME"] }}</span
|
||||
>
|
||||
<span>{{ item["CASENUM"] | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="title">
|
||||
强制措施占比分析
|
||||
<!-- <span @click="$router.push('publicSecurityDetail2')"
|
||||
>查看></span
|
||||
> -->
|
||||
</h3>
|
||||
<ul class="box">
|
||||
<li>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj2"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj3"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj4"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj5"></Echarts>
|
||||
</li>
|
||||
<li>
|
||||
<Echarts :key="echartObjKey2" :echartObj="echartObj6"></Echarts>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<h3 class="title">各区提请逮捕数量</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<span>区</span>
|
||||
<span>数量(件)</span>
|
||||
</li>
|
||||
<li v-for="(item, index) in areRequestArrestNum" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<p><i :style="{ width: item.width }"></i></p>
|
||||
<span>{{ item.value | formatNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echarts from "@/components/echarts";
|
||||
import {
|
||||
areRequestArrestNum,
|
||||
causeActionNumTop10,
|
||||
coerciveMeasures,
|
||||
intelligentCaseHandingCriminaCaseTrend,
|
||||
townshipCaseTop10,
|
||||
} from "@/api/intelligentApi";
|
||||
import {createOperationLog} from "@/api/api"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
echartObjKey1: "echartObjKey1",
|
||||
echartObjKey2: "echartObjKey2",
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() - 8.64e6;
|
||||
},
|
||||
},
|
||||
|
||||
param: {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
},
|
||||
// 各区提请逮捕数量
|
||||
areRequestArrestNum: [],
|
||||
// 案由数量TOP10
|
||||
causeActionNumTop101: [],
|
||||
causeActionNumTop102: [],
|
||||
// 街(乡)镇发案数量TOP10
|
||||
townshipCaseTop101: [],
|
||||
townshipCaseTop102: [],
|
||||
date: "",
|
||||
// 刑事案件趋势
|
||||
echartObj1: {
|
||||
color: ["#149bea", "#f35a6c"], //图例颜色
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
position: "inside",
|
||||
},
|
||||
legend: {
|
||||
icon: "circle", //圆点
|
||||
top: "10",
|
||||
right: "20",
|
||||
textStyle: {
|
||||
color: "#fff", //图例字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "60",
|
||||
left: "10",
|
||||
right: "40",
|
||||
bottom: "10",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
axisLine: {
|
||||
//轴线修改
|
||||
lineStyle: {
|
||||
color: "#2dd4fc", // 颜色
|
||||
width: 2, // 粗细
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#2dd4fc",
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位(件)",
|
||||
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",
|
||||
animationDuration: 2000,
|
||||
smooth: true,
|
||||
showBackground: true, //柱图显示背景色
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "提请逮捕数",
|
||||
type: "line",
|
||||
animationDuration: 2000,
|
||||
smooth: true,
|
||||
showBackground: true, //柱图显示背景色
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
// formatter: '{b} : {c}人 ({d}%)',
|
||||
formatter: (p) => {
|
||||
//千分位
|
||||
return this.formatNum(p.value);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 强制措施占比分析
|
||||
echartObj2: {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
bottom: 0,
|
||||
textStyle: {
|
||||
color: "#27d1fc",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["40%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{d}%",
|
||||
position: "center",
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#00DDDF" },
|
||||
{ offset: 1, color: "#00A7B9" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "其他",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#004878",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
echartObj3: {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
bottom: 0,
|
||||
textStyle: {
|
||||
color: "#27d1fc",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["40%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{d}%",
|
||||
position: "center",
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#00DDDF" },
|
||||
{ offset: 1, color: "#00A7B9" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "其他",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#004878",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
echartObj4: {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
bottom: 0,
|
||||
textStyle: {
|
||||
color: "#27d1fc",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["40%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{d}%",
|
||||
position: "center",
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#00DDDF" },
|
||||
{ offset: 1, color: "#00A7B9" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "其他",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#004878",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
echartObj5: {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
bottom: 0,
|
||||
textStyle: {
|
||||
color: "#27d1fc",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["40%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{d}%",
|
||||
position: "center",
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#00DDDF" },
|
||||
{ offset: 1, color: "#00A7B9" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "其他",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#004878",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
echartObj6: {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
bottom: 0,
|
||||
textStyle: {
|
||||
color: "#27d1fc",
|
||||
fontSize: "14",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
animationDuration: 2000,
|
||||
radius: ["40%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{d}%",
|
||||
position: "center",
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "#00DDDF" },
|
||||
{ offset: 1, color: "#00A7B9" },
|
||||
]
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "其他",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#004878",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
Echarts,
|
||||
},
|
||||
created() {
|
||||
this.param = {
|
||||
startYear: "",
|
||||
endYear: "",
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let pointParams ={
|
||||
opeLogExceptionInfo: '进入智能办案专题模块查询了公安数据',//日志描述
|
||||
opeLogUserAccount:this.$cookies.get('username'),//用户账户
|
||||
opeLogSystem:"BJCM-DSJ",//系统编码
|
||||
opeLogStatus: 1,
|
||||
opeLogIp:""
|
||||
}
|
||||
createOperationLog(pointParams).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
//各区提请逮捕数量
|
||||
areRequestArrestNum(this.param)
|
||||
.then((res) => {
|
||||
let data = [];
|
||||
let max;
|
||||
res.listclass.forEach((item, index) => {
|
||||
data[index] = {
|
||||
name: item,
|
||||
value: 0,
|
||||
width: "0%",
|
||||
};
|
||||
if (res.areRequestArrestNum.length > 0) {
|
||||
if (!max) {
|
||||
max = this.getMax([...res.areRequestArrestNum]);
|
||||
}
|
||||
res.areRequestArrestNum.forEach((i) => {
|
||||
if (item == i["AREACODENAME"]) {
|
||||
data[index].value = i["REQUESTARREST"];
|
||||
}
|
||||
});
|
||||
}
|
||||
data.forEach((item) => {
|
||||
if (max) {
|
||||
item.width = ((item.value / max) * 100).toFixed(2) + "%";
|
||||
}
|
||||
});
|
||||
});
|
||||
this.areRequestArrestNum = data;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
//案由数量TOP10
|
||||
causeActionNumTop10(this.param)
|
||||
.then((res) => {
|
||||
this.causeActionNumTop101 = [];
|
||||
this.causeActionNumTop102 = [];
|
||||
res.causeActionNumTop10.forEach((item, index) => {
|
||||
if (index < 5) {
|
||||
this.causeActionNumTop101.push(item);
|
||||
} else {
|
||||
this.causeActionNumTop102.push(item);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 强制措施占比分析
|
||||
coerciveMeasures(this.param)
|
||||
.then((res) => {
|
||||
for (let i = 2; i < 7; i++) {
|
||||
this["echartObj" + i].title.text = "";
|
||||
this["echartObj" + i].series[0].data[0].name = "";
|
||||
this["echartObj" + i].series[0].data[0].value = 0;
|
||||
this["echartObj" + i].series[0].data[1].value = 0;
|
||||
}
|
||||
if (res.coerciveMeasures.length > 0) {
|
||||
let total = 0;
|
||||
res.coerciveMeasures.forEach((item) => {
|
||||
total += item["NUM"];
|
||||
});
|
||||
res.coerciveMeasures.forEach((item, index) => {
|
||||
this["echartObj" + (index + 2)].title.text =
|
||||
item["COERCIVEMEASURESCODENAME"] +
|
||||
"：" +
|
||||
this.formatNum(item["NUM"]) +
|
||||
"人";
|
||||
this["echartObj" + (index + 2)].series[0].data[0].name =
|
||||
item["COERCIVEMEASURESCODENAME"];
|
||||
this["echartObj" + (index + 2)].series[0].data[0].value =
|
||||
item["NUM"];
|
||||
this["echartObj" + (index + 2)].series[0].data[1].value =
|
||||
total - item["NUM"];
|
||||
});
|
||||
}
|
||||
this.echartObjKey2 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
//刑事案件趋势
|
||||
intelligentCaseHandingCriminaCaseTrend(this.param)
|
||||
.then((res) => {
|
||||
this.echartObj1.xAxis[0].data = [];
|
||||
this.echartObj1.series[0].data = [];
|
||||
this.echartObj1.series[1].data = [];
|
||||
if (res.intelligentCaseHandingCriminaCaseTrend.length > 0) {
|
||||
res.intelligentCaseHandingCriminaCaseTrend.forEach((item) => {
|
||||
this.echartObj1.xAxis[0].data.push(item["YEAR_MONTH"]);
|
||||
this.echartObj1.series[0].data.push(item["CASENUM"]); //案件数
|
||||
this.echartObj1.series[1].data.push(item["REQUESTARREST"]); //提请逮捕数
|
||||
});
|
||||
}
|
||||
this.echartObjKey1 = new Date().getTime() + 1;
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
// 街(乡)镇发案数量TOP10
|
||||
townshipCaseTop10(this.param)
|
||||
.then((res) => {
|
||||
this.townshipCaseTop101 = [];
|
||||
this.townshipCaseTop102 = [];
|
||||
res.townshipCaseTop10.forEach((item, index) => {
|
||||
if (index < 5) {
|
||||
this.townshipCaseTop101.push(item);
|
||||
} else {
|
||||
this.townshipCaseTop102.push(item);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
console.error(res);
|
||||
});
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange(val) {
|
||||
if (val) {
|
||||
this.param.startYear = val[0];
|
||||
this.param.endYear = val[1];
|
||||
} else {
|
||||
this.param.startYear = "";
|
||||
this.param.endYear = "";
|
||||
}
|
||||
},
|
||||
// 获取X轴最大值
|
||||
getMax(arr) {
|
||||
arr.sort(function (a, b) {
|
||||
return a["REQUESTARREST"] - b["REQUESTARREST"];
|
||||
});
|
||||
let max = arr[arr.length - 1]["REQUESTARREST"]; // 计算最大值
|
||||
let num = Math.floor(max / 10) * 10 + 10; // 获取X轴最大值
|
||||
return num;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.main {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
padding: 20px 50px;
|
||||
.left,
|
||||
.middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
.top10 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
> ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-child(1) span {
|
||||
color: #fff;
|
||||
}
|
||||
span {
|
||||
width: 90px;
|
||||
color: #27d1fc;
|
||||
&:nth-child(2) {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #3cd2ff;
|
||||
border: 1px solid #3cd2ff;
|
||||
border-radius: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
margin-right: 40px;
|
||||
li:nth-child(2) i {
|
||||
color: #f72121;
|
||||
border: 1px solid #f72121;
|
||||
}
|
||||
li:nth-child(3) i {
|
||||
color: #f05613;
|
||||
border: 1px solid #f05613;
|
||||
}
|
||||
li:nth-child(4) i {
|
||||
color: #f8a925;
|
||||
border: 1px solid #f8a925;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
.middle {
|
||||
width: 30%;
|
||||
margin: 0 100px;
|
||||
.top10 > ul li span {
|
||||
flex: 1;
|
||||
&:nth-child(2) {
|
||||
flex: 0 1 auto;
|
||||
width: 80px;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 33%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
min-width: 60px;
|
||||
}
|
||||
span:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
p {
|
||||
flex: 1;
|
||||
|
||||
i {
|
||||
transition: width 2s ease-out;
|
||||
-moz-transition: width 2s ease-out;
|
||||
-webkit-transition: width 2s ease-out;
|
||||
-o-transition: width 2s ease-out;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
border-radius: 15px;
|
||||
background-image: linear-gradient(to right, #36ecfe, #fde191);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h3.title {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color: #43ebf6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #0fd4f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,248 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="search">
|
||||
<div>
|
||||
<label>时间：</label>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>所属区：</label>
|
||||
<el-select v-model="value3" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<label>所属街道：</label>
|
||||
<el-select v-model="value4" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button type="primary" round><i class="iconfont iconchaxun"></i>查询</el-button>
|
||||
</div>
|
||||
|
||||
<dv-border-box-7 :color="['#15369F','#fff']" style="padding: 20px 15px;box-sizing: border-box">
|
||||
<el-table class="lh40 mgasj" :max-height="tableHeight" border :data="tableData">
|
||||
<el-table-column align="center" width="60" type="index" label="序号"></el-table-column>
|
||||
<el-table-column align="center" width="100" prop="a1" label="所属区"></el-table-column>
|
||||
<el-table-column align="center" prop="a2" label="所属街道"></el-table-column>
|
||||
<el-table-column align="center" prop="a3" label="立案量(件)"></el-table-column>
|
||||
<el-table-column align="center" prop="a4" label="提请逮捕(件)"></el-table-column>
|
||||
<el-table-column align="center" prop="a5" label="提请逮捕人数(人)"></el-table-column>
|
||||
</el-table>
|
||||
</dv-border-box-7>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
tableHeight: (window.innerHeight -76-72-10-10 - 40 -60 -40),
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
options1: [
|
||||
{ value: '', label: '全部', },
|
||||
{ value: '东城区', label: '东城区', },
|
||||
{ value: '西城区', label: '西城区', },
|
||||
{ value: '朝阳区', label: '朝阳区', },
|
||||
{ value: '海淀区', label: '海淀区', },
|
||||
{ value: '丰台区', label: '丰台区', },
|
||||
{ value: '石景山区', label: '石景山区', },
|
||||
{ value: '大兴区', label: '大兴区', },
|
||||
{ value: '通州区', label: '通州区', },
|
||||
{ value: '顺义区', label: '顺义区', },
|
||||
{ value: '昌平区', label: '昌平区', },
|
||||
{ value: '房山区', label: '房山区', },
|
||||
{ value: '门头沟区', label: '门头沟区', },
|
||||
{ value: '怀柔区', label: '怀柔区', },
|
||||
{ value: '平谷区', label: '平谷区', },
|
||||
{ value: '密云区', label: '密云区', },
|
||||
{ value: '延庆区', label: '延庆区', },
|
||||
],
|
||||
options2: [
|
||||
{ value: '', label: '全部'},
|
||||
{ value: '1', label: '**街道'},
|
||||
{ value: '2', label: '***街道'},
|
||||
{ value: '3', label: '***街道'},
|
||||
{ value: '4', label: '****街道'},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
a1: '东城区',
|
||||
a2: '*******街道',
|
||||
a3: '3080',
|
||||
a4: '3080',
|
||||
a5: '3080',
|
||||
},
|
||||
{
|
||||
a1: '西城区',
|
||||
a2: '*******街道',
|
||||
a3: '7000',
|
||||
a4: '7000',
|
||||
a5: '7000',
|
||||
},
|
||||
{
|
||||
a1: '朝阳区',
|
||||
a2: '*******街道',
|
||||
a3: '12000',
|
||||
a4: '12000',
|
||||
a5: '12000',
|
||||
},
|
||||
{
|
||||
a1: '海淀区',
|
||||
a2: '*******街道',
|
||||
a3: '8500',
|
||||
a4: '8500',
|
||||
a5: '8500',
|
||||
},
|
||||
{
|
||||
a1: '丰台区',
|
||||
a2: '*******街道',
|
||||
a3: '1900',
|
||||
a4: '1900',
|
||||
a5: '1900',
|
||||
},
|
||||
{
|
||||
a1: '石景山区',
|
||||
a2: '*******街道',
|
||||
a3: '6010',
|
||||
a4: '6010',
|
||||
a5: '6010',
|
||||
},
|
||||
{
|
||||
a1: '大兴区',
|
||||
a2: '*******街道',
|
||||
a3: '1500',
|
||||
a4: '1500',
|
||||
a5: '1500',
|
||||
},
|
||||
{
|
||||
a1: '通州区',
|
||||
a2: '*******街道',
|
||||
a3: '4020',
|
||||
a4: '4020',
|
||||
a5: '4020',
|
||||
},
|
||||
{
|
||||
a1: '顺义区',
|
||||
a2: '*******街道',
|
||||
a3: '4500',
|
||||
a4: '4500',
|
||||
a5: '4500',
|
||||
},
|
||||
{
|
||||
a1: '昌平区',
|
||||
a2: '*******街道',
|
||||
a3: '3800',
|
||||
a4: '3800',
|
||||
a5: '3800',
|
||||
},
|
||||
{
|
||||
a1: '房山区',
|
||||
a2: '*******街道',
|
||||
a3: '4200',
|
||||
a4: '4200',
|
||||
a5: '4200',
|
||||
},
|
||||
{
|
||||
a1: '门头沟区',
|
||||
a2: '*******街道',
|
||||
a3: '4800',
|
||||
a4: '4800',
|
||||
a5: '4800',
|
||||
},
|
||||
{
|
||||
a1: '怀柔区',
|
||||
a2: '*******街道',
|
||||
a3: '1700',
|
||||
a4: '1700',
|
||||
a5: '1700',
|
||||
},
|
||||
{
|
||||
a1: '平谷区',
|
||||
a2: '*******街道',
|
||||
a3: '1600',
|
||||
a4: '1600',
|
||||
a5: '1600',
|
||||
},
|
||||
{
|
||||
a1: '密云区',
|
||||
a2: '*******街道',
|
||||
a3: '1500',
|
||||
a4: '1500',
|
||||
a5: '1500',
|
||||
},
|
||||
{
|
||||
a1: '延庆区',
|
||||
a2: '*******街道',
|
||||
a3: '1900',
|
||||
a4: '1900',
|
||||
a5: '1900',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
console.log("1111111");
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
handleDelete(obj){
|
||||
console.log(obj);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
.search{
|
||||
display: flex;
|
||||
padding: 30px 0px;
|
||||
justify-content: center;
|
||||
&>div{
|
||||
display: flex;
|
||||
label{
|
||||
line-height: 40px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.el-input{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
margin-left: 15px;
|
||||
width: 120px;
|
||||
.iconfont{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table:before {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,265 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="search">
|
||||
<div>
|
||||
<label>时间：</label>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="monthrange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div>
|
||||
<label>所属区：</label>
|
||||
<el-select v-model="value3" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<label>所属街道：</label>
|
||||
<el-select v-model="value4" clearable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button type="primary" round><i class="iconfont iconchaxun"></i>查询</el-button>
|
||||
</div>
|
||||
|
||||
<dv-border-box-7 :color="['#15369F','#fff']" style="padding: 20px 15px;box-sizing: border-box">
|
||||
<el-table class="lh40 mgasj" :max-height="tableHeight" border :data="tableData">
|
||||
<el-table-column align="center" width="60" type="index" label="序号"></el-table-column>
|
||||
<el-table-column align="center" width="100" prop="a1" label="所属区"></el-table-column>
|
||||
<el-table-column align="center" prop="a2" label="拘传(人)"></el-table-column>
|
||||
<el-table-column align="center" prop="a3" label="取保候审(人)"></el-table-column>
|
||||
<el-table-column align="center" prop="a4" label="监视居住(人)"></el-table-column>
|
||||
<el-table-column align="center" prop="a5" label="拘留(人)"></el-table-column>
|
||||
<el-table-column align="center" prop="a5" label="逮捕(人)"></el-table-column>
|
||||
</el-table>
|
||||
</dv-border-box-7>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
tableHeight: (window.innerHeight -76-72-10-10 - 40 -60 -40),
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
options1: [
|
||||
{ value: '', label: '全部', },
|
||||
{ value: '东城区', label: '东城区', },
|
||||
{ value: '西城区', label: '西城区', },
|
||||
{ value: '朝阳区', label: '朝阳区', },
|
||||
{ value: '海淀区', label: '海淀区', },
|
||||
{ value: '丰台区', label: '丰台区', },
|
||||
{ value: '石景山区', label: '石景山区', },
|
||||
{ value: '大兴区', label: '大兴区', },
|
||||
{ value: '通州区', label: '通州区', },
|
||||
{ value: '顺义区', label: '顺义区', },
|
||||
{ value: '昌平区', label: '昌平区', },
|
||||
{ value: '房山区', label: '房山区', },
|
||||
{ value: '门头沟区', label: '门头沟区', },
|
||||
{ value: '怀柔区', label: '怀柔区', },
|
||||
{ value: '平谷区', label: '平谷区', },
|
||||
{ value: '密云区', label: '密云区', },
|
||||
{ value: '延庆区', label: '延庆区', },
|
||||
],
|
||||
options2: [
|
||||
{ value: '', label: '全部'},
|
||||
{ value: '1', label: '**街道'},
|
||||
{ value: '2', label: '***街道'},
|
||||
{ value: '3', label: '***街道'},
|
||||
{ value: '4', label: '****街道'},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
a1: '东城区',
|
||||
a2: '3080',
|
||||
a3: '3080',
|
||||
a4: '3080',
|
||||
a5: '3080',
|
||||
a6: '3080',
|
||||
},
|
||||
{
|
||||
a1: '西城区',
|
||||
a2: '7000',
|
||||
a3: '7000',
|
||||
a4: '7000',
|
||||
a5: '7000',
|
||||
a6: '7000',
|
||||
},
|
||||
{
|
||||
a1: '朝阳区',
|
||||
a2: '12000',
|
||||
a3: '12000',
|
||||
a4: '12000',
|
||||
a5: '12000',
|
||||
a6: '12000',
|
||||
},
|
||||
{
|
||||
a1: '海淀区',
|
||||
a2: '8500',
|
||||
a3: '8500',
|
||||
a4: '8500',
|
||||
a5: '8500',
|
||||
a6: '8500',
|
||||
},
|
||||
{
|
||||
a1: '丰台区',
|
||||
a2: '1900',
|
||||
a3: '1900',
|
||||
a4: '1900',
|
||||
a5: '1900',
|
||||
a6: '1900',
|
||||
},
|
||||
{
|
||||
a1: '石景山区',
|
||||
a2: '6010',
|
||||
a3: '6010',
|
||||
a4: '6010',
|
||||
a5: '6010',
|
||||
a6: '6010',
|
||||
},
|
||||
{
|
||||
a1: '大兴区',
|
||||
a2: '1500',
|
||||
a3: '1500',
|
||||
a4: '1500',
|
||||
a5: '1500',
|
||||
a6: '1500',
|
||||
},
|
||||
{
|
||||
a1: '通州区',
|
||||
a2: '4020',
|
||||
a3: '4020',
|
||||
a4: '4020',
|
||||
a5: '4020',
|
||||
a6: '4020',
|
||||
},
|
||||
{
|
||||
a1: '顺义区',
|
||||
a2: '4500',
|
||||
a3: '4500',
|
||||
a4: '4500',
|
||||
a5: '4500',
|
||||
a6: '4500',
|
||||
},
|
||||
{
|
||||
a1: '昌平区',
|
||||
a2: '3800',
|
||||
a3: '3800',
|
||||
a4: '3800',
|
||||
a5: '3800',
|
||||
a6: '3800',
|
||||
},
|
||||
{
|
||||
a1: '房山区',
|
||||
a2: '4200',
|
||||
a3: '4200',
|
||||
a4: '4200',
|
||||
a5: '4200',
|
||||
a6: '4200',
|
||||
},
|
||||
{
|
||||
a1: '门头沟区',
|
||||
a2: '4800',
|
||||
a3: '4800',
|
||||
a4: '4800',
|
||||
a5: '4800',
|
||||
a6: '4800',
|
||||
},
|
||||
{
|
||||
a1: '怀柔区',
|
||||
a2: '1700',
|
||||
a3: '1700',
|
||||
a4: '1700',
|
||||
a5: '1700',
|
||||
a6: '1700',
|
||||
},
|
||||
{
|
||||
a1: '平谷区',
|
||||
a2: '1600',
|
||||
a3: '1600',
|
||||
a4: '1600',
|
||||
a5: '1600',
|
||||
a6: '1600',
|
||||
},
|
||||
{
|
||||
a1: '密云区',
|
||||
a2: '1500',
|
||||
a3: '1500',
|
||||
a4: '1500',
|
||||
a5: '1500',
|
||||
a6: '1500',
|
||||
},
|
||||
{
|
||||
a1: '延庆区',
|
||||
a2: '1900',
|
||||
a3: '1900',
|
||||
a4: '1900',
|
||||
a5: '1900',
|
||||
a6: '1900',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
mounted() {
|
||||
console.log("1111111");
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
handleDelete(obj){
|
||||
console.log(obj);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
.search{
|
||||
display: flex;
|
||||
padding: 30px 0px;
|
||||
justify-content: center;
|
||||
&>div{
|
||||
display: flex;
|
||||
label{
|
||||
line-height: 40px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.el-input{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.el-button{
|
||||
margin-left: 15px;
|
||||
width: 120px;
|
||||
.iconfont{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table:before {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -88,13 +88,14 @@ export default new Router({
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
// 智能设备
|
||||
{
|
||||
path: '/09',
|
||||
name: '09',
|
||||
component: () => import('@/pages/page/09'),
|
||||
path: '/intelligent',
|
||||
name: 'intelligent',
|
||||
component: () => import('@/pages/intelligent/index'),
|
||||
meta: {
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
},
|
||||
// 首页
|
||||
{
|
||||
@ -502,77 +503,6 @@ export default new Router({
|
||||
},
|
||||
]
|
||||
},
|
||||
// 智能办案
|
||||
{
|
||||
path: '/intelligent',
|
||||
name: 'intelligent',
|
||||
redirect: '/intelligent/home', // 设置默认路由
|
||||
component: () => import('@/pages/intelligent/index'),
|
||||
meta: {
|
||||
index: 1,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'intelligentHome',
|
||||
path: 'home',
|
||||
component: resolve => require(['@/pages/intelligent/home'], resolve),
|
||||
},
|
||||
{
|
||||
// 公安
|
||||
name: '/intelligent/publicSecurity',
|
||||
path: 'publicSecurity',
|
||||
component: resolve => require(['@/pages/intelligent/publicSecurity'], resolve),
|
||||
},
|
||||
{
|
||||
// 公安-趋势各区量查询、案由
|
||||
name: 'publicSecurityDetail1',
|
||||
path: 'publicSecurityDetail1',
|
||||
component: resolve => require(['@/pages/intelligent/publicSecurityDetail1'], resolve),
|
||||
},
|
||||
{
|
||||
// 公安-强制措施
|
||||
name: 'publicSecurityDetail2',
|
||||
path: 'publicSecurityDetail2',
|
||||
component: resolve => require(['@/pages/intelligent/publicSecurityDetail2'], resolve),
|
||||
},
|
||||
{
|
||||
// 检察院
|
||||
name: 'procuratorate',
|
||||
path: 'procuratorate',
|
||||
component: resolve => require(['@/pages/intelligent/procuratorate'], resolve),
|
||||
},
|
||||
{
|
||||
// 法院
|
||||
name: 'court',
|
||||
path: 'court',
|
||||
component: resolve => require(['@/pages/intelligent/court'], resolve),
|
||||
},
|
||||
{
|
||||
// 司法
|
||||
name: 'judicial',
|
||||
path: 'judicial',
|
||||
component: resolve => require(['@/pages/intelligent/judicial'], resolve),
|
||||
},
|
||||
{
|
||||
// 涉案财物
|
||||
name: 'money',
|
||||
path: 'money',
|
||||
component: resolve => require(['@/pages/intelligent/money'], resolve),
|
||||
},
|
||||
{
|
||||
// 减刑假释
|
||||
name: 'commutation',
|
||||
path: 'commutation',
|
||||
component: resolve => require(['@/pages/intelligent/commutation'], resolve),
|
||||
},
|
||||
{
|
||||
// 犯罪嫌疑人
|
||||
name: 'criminalSuspect',
|
||||
path: 'criminalSuspect',
|
||||
component: resolve => require(['@/pages/intelligent/criminalSuspect'], resolve),
|
||||
},
|
||||
]
|
||||
},
|
||||
// 反邪教专题
|
||||
{
|
||||
path: '/cult',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user