Skip to content

F
founder_vue
Commit cd16fc55 by xue_wengang
Options

各州地市发案情况、重大案件发案情况

parent b5e95b53
Showing with 777 additions and 899 deletions
src/api/ypbg.js
......@@ -14,9 +14,13 @@ import base from "@/api/base";
export const EsNldQuery = params =>
post(`${base.alyIP}/latsfx/EsNldQuery`, params)
//类案件嫌疑人户籍分布
export const EshjfbQuery = params =>
post(`${base.alyIP}/latsfx/EshjfbQuery`, params)
//各地州市发破案情况
export const getJqzs = params =>
post(`${base.alyIP}/jqyp/getJqzs`, params)
//各地州市重大案件
export const getZdaj = params =>
post(`${base.alyIP}/jqyp/getZdajqk`, params)
//类案件嫌疑人抓获情况
export const EszhqkQuery = params =>
......
src/router/index.js
......@@ -165,15 +165,15 @@ router.beforeEach((to, from, next) => {
}
to.meta.title = str;
}
// let userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"))
// let name = userInfo.realname.substring(0, userInfo.realname.length - 1)
// let names = userInfo.realname.replace(name, '***')
// let zjhm = userInfo.identitycard.replace(/^(.{10})(?:\d+)(.{4})$/, "$1****$2")
// let one = `${zjhm} ${names}`
// let xmmc = '西藏刑侦综合应用系统'
// let two = `${userInfo.ip} ${xmmc}`
// let time = moment.timeStampTurnTime(new Date().getTime())
// Watermark.set(one, time, two, userInfo.unitname)
let userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"))
let name = userInfo.realname.substring(0, userInfo.realname.length - 1)
let names = userInfo.realname.replace(name, '***')
let zjhm = userInfo.identitycard.replace(/^(.{10})(?:\d+)(.{4})$/, "$1****$2")
let one = `${zjhm} ${names}`
let xmmc = '西藏刑侦综合应用系统'
let two = `${userInfo.ip} ${xmmc}`
let time = moment.timeStampTurnTime(new Date().getTime())
Watermark.set(one, time, two, userInfo.unitname)
}
next()
})
......
src/views/index/echarts/zztCharts.js 0 → 100644
import echarts from 'echarts'
// 主要发案
export function zztCharts(row) {
let option = {
title: {
text: row.title,
x: "center",
subtext: ``,
show: true,
textStyle: {
fontFamily: '',
fontSize: 18,
fontWeight: '500',
fontStyle: 'normal',
color: '#242424',
verticalAlign: 'middle',
lineHeight: 24,
rich: {
las: {
color: '#4795FF',
fontSize: 18,
},
pas: {
color: '#fa8c16',
fontSize: 18,
},
a: {
verticalAlign: 'middle',
height: 24,
width: 24,
backgroundColor: {
//添加的图片
},
},
}
},
subtextStyle: { // 设置二级标题的样式
fontSize: 16,
color: "#242424"
}
},
tooltip: {
trigger: 'axis',
},
color: ['#FF72B8'],
legend: {
textStyle: {
fontSize: 14,//字体大小
color: 'A2B3C3',//字体颜色
lineHeight: 25,
background: 'red',
},
data: [{
name: '',
icon: 'circle',
}],
right: '2%'
},
xAxis: [
{
type: 'category',
data: row.x,
axisPointer: {
type: 'shadow'
},
axisTick: { show: false, },
axisLabel: {//x轴文字的配置
show: true,
rotate: 0,
textStyle: {
color: "#242424",
}
},
axisLine: {//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#E6F7FF",
width: 1,
type: "solid"
},
},
}
],
// row.y[0] || 5
// row.y[0] / 5 || 1
yAxis: [
{
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show: true //隐藏或显示
},
name: '',
// min: 0,
// max: 150000,
// splitNumber: 5,
// interval: 150000 / 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: "#7697B7",
}
},
},
],
series: [
{
barWidth: 80,//柱子宽度
barGap: 0,//柱子间距
name: '',
type: 'bar',
label: {
position: 'top',
show: true
},
showBackground: true,
backgroundStyle: {
color: 'rgba(255,255,255,0.1000)'
},
itemStyle: {
normal: {
color: '#4795FF',
}
},
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: row.y
},
],
grid: {
x: 80,
y: 70,
x2: 5,
y2: 25,
borderWidth: 1,
},
};
return option
}
src/views/index/ypbg.vue
<template>
<div id="ypbg">
<div class="title">
<img src="../../assets/img/login/jinhui.png"
alt="" />
<img src="../../assets/img/login/jinhui.png" alt="" />
<div class="name">警情研判报告</div>
</div>
<div class="content">
<div class="query">
<el-form label-position="right"
<el-form
label-position="right"
label-width="110px"
:inline="true"
:model="formData">
:model="formData"
>
<div class="zdyLine">
<el-form-item :label="item.name + ':'"
<el-form-item
:label="item.name + ':'"
v-for="item in propQueryField"
:key="item.id"
:prop="item.id">
:prop="item.id"
>
<div v-if="item.type == 'zdyDate'">
<el-date-picker v-model="formData[item.id]"
<el-date-picker
v-model="formData[item.id]"
type="date"
align="right"
:picker-options="item.pickerOptions"
unlink-panels
value-format="yyyy-MM-dd">
value-format="yyyy-MM-dd"
>
</el-date-picker>
至
<el-date-picker v-model="formData[item.id2]"
<el-date-picker
v-model="formData[item.id2]"
type="date"
align="right"
:picker-options="item.pickerOptions2"
unlink-panels
value-format="yyyy-MM-dd">
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
<div v-else-if="item.type == 'codeTreeDialog'">
<select-tree-dialog :placeholder="'请选择' + item.name"
:sendId="item.id"
:formData="formData"
:currentItem="item"
:multiple="item.multiple"
@getDialogSeleted="getCodeSeleted($event, item)" />
</div>
</el-form-item>
<el-form-item>
<div class="btn"
@click="doQuery()">查询</div>
<div class="btn" @click="doQuery()">查询</div>
</el-form-item>
</div>
</el-form>
</div>
<div class="yp_body">
<div class="yp_title">
<img class="yp_img"
src="../../assets/img/ypbg_title.png" />
<img class="yp_img" src="../../assets/img/ypbg_title.png" />
<div class="yp_name">警情研判报告</div>
<img class="yp_dy"
@click="print"
src="../../assets/img/dy.png" />
<img class="yp_dy" @click="print" src="../../assets/img/dy.png" />
</div>
<div class="yp_contnet">
<div class="jqzs"
id="jqzs">
<div class="jqzs" id="jqzs">
<span>警情综述</span>
<p v-html="jqzs"></p>
<p>
本期 ({{ formData.fasjStart }}至{{ formData.fasjEnd }})
全区共发生案{{ JqzsFa.fas }}起，环比上期({{
JqzsFa.fahbs
}}起)<span
:class="JqzsFa.hbAjclass == 'up' ? 'upclass' : 'downclass'"
>{{ JqzsFa.hbAjclass == "up" ? "⬆" : "⬇" }}</span
>{{ JqzsFa.fahb }}，同比上期({{ JqzsFa.fatbs }}起)<span
:class="JqzsFa.tbAjclass == 'up' ? 'upclass' : 'downclass'"
>{{ JqzsFa.tbAjclass == "up" ? "⬆" : "⬇" }}</span
>
{{ JqzsFa.fatb }}，造成经济损失{{ JqzsFa.ssje }}元同比上期 ({{
JqzsFa.sstbs
}}元)<span
:class="JqzsFa.tbJeclass == 'up' ? 'upclass' : 'downclass'"
>{{ JqzsFa.tbJeclass == "up" ? "⬆" : "⬇" }}</span
>{{ JqzsFa.sszb }}，环比上期 ({{ JqzsFa.sshbs }}元)<span
:class="JqzsFa.hbJeclass == 'up' ? 'upclass' : 'downclass'"
>{{ JqzsFa.hbJeclass == "up" ? "⬆" : "⬇" }}</span
>
{{ JqzsFa.sshb }}。本期共破获刑事案件{{ JqzsPa.fas }}起，环比上期
({{ JqzsPa.fahbs }}起)
<span
:class="JqzsFa.hbAjclass == 'up' ? 'upclass' : 'downclass'"
>{{ JqzsFa.hbAjclass == "up" ? "⬆" : "⬇" }}</span
>{{ JqzsPa.fahb }}，同比期上期 ({{ JqzsPa.fatbs }}起)
<span
:class="JqzsFa.tbAjclass == 'up' ? 'upclass' : 'downclass'"
>{{ JqzsFa.tbAjclass == "up" ? "⬆" : "⬇" }}</span
>{{ JqzsPa.fatb }}
</p>
</div>
<div class="subtitle"
id="xsajfaqk">一、刑事案件发案情况</div>
<div class="jqzs bj"
id="gxqfaqk">
<span>1、各辖区发案情况</span>
<p v-html="faqk"></p>
<div class="subtitle" id="xsajfaqk">一、刑事案件发案情况</div>
<div class="jqzs bj" id="gxqfaqk">
<span>1、各地州市发案情况</span>
<p>
本期 ({{ formData.fasjStart }}至{{
formData.fasjEnd
}}),全区发案总量最大的地州市是{{
JqzsFaMax.dwmc
}}，本期共发生案件{{ JqzsFaMax.fas }}起，占全区发案总数的{{
JqzsFaMax.fazb
}}，案件造成损失总额最大的地州市是{{
JqzsFajeMax.dwmc
}}，本期共造成经济损失{{ JqzsFajeMax.ssje }}元，占全区损失总量的{{
JqzsFajeMax.sszb
}}。
</p>
</div>
<div id="gxqfa"
<div
id="gxqfa"
ref="gxqfa"
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div class="table"
style="margin-top: 20px">
<el-table id="ajzbQuery"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
<div class="table" style="margin-top: 20px">
<el-table
id="ajzbQuery"
ref="itsmDataTable"
:data="tableDataFa"
tooltip-effect="dark"
width="98%"
size="small">
<el-table-column align="center"
size="small"
>
<el-table-column
align="center"
v-for="columnTitle in propdefaultFormTheadFa"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width">
:width="columnTitle.width"
>
<template slot-scope="scope">
<div v-if="columnTitle.prop == 'asjbh'"
<div
v-if="columnTitle.prop == 'asjbh'"
@click="goDetail(scope.row)"
style="
cursor: pointer;
......@@ -98,118 +138,179 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">
"
>
{{ scope.row[columnTitle.prop] }}
</div>
<div v-else-if="columnTitle.label == '发案环比'">
<span>上期:{{ scope.row["sqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span>
<span>环比上期:{{ scope.row["fahbs"] }}起</span>
<span
:class="
scope.row.hbAjclass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbAjclass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["fahb"] }}</span
>
</div>
<div v-else-if="columnTitle.label == '发案同比'">
<!-- {{ item.split(":")[0] }}：{{
scope.row[item.split(":")[1]]
}} -->
<span>上期:{{ scope.row["tqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span>
<span>同比去年:{{ scope.row["fatbs"] }}起</span>
<span
:class="
scope.row.tbAjclass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbAjclass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["fatb"] }}</span
>
</div>
<div v-else-if="columnTitle.label == '损失环比'">
<span>环比上期:{{ scope.row["sshbs"] }}起</span>
<span
:class="
scope.row.hbJeclass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbJeclass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["sshb"] }}</span
>
</div>
<div v-else-if="columnTitle.label == '损失同比'">
<span>同比去年:{{ scope.row["sstbs"] }}起</span>
<span
:class="
scope.row.tbJeclass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbJeclass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["sstb"] }}</span
>
</div>
<div v-else
v-html="scope.row[columnTitle.prop]"></div>
<div v-else v-html="scope.row[columnTitle.prop]"></div>
</template>
</el-table-column>
</el-table>
</div>
<div class="jqzs bj"
id="zylbfaqk">
<span>2、主要类别案件发案情况</span>
<p v-html="zylbfa"></p>
<div class="jqzs bj" id="zdajfaqk">
<span>2、重大案件发案情况</span>
<p>
本期 ({{ formData.fasjStart }}至{{
formData.fasjEnd
}}),全区共发生损失金额超过5万元以上案件{{
zdajFa.ssje5
}}，其中50万元以上案件{{ zdajFa.ssje50 }}起、100万元以上案件{{
zdajFa.ssje100
}}起、500万元以上案件{{
zdajFa.ssje500
}}起。
</p>
</div>
<div id="zylbfa"
ref="zylbfa"
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div
id="zdajfa"
ref="zdajfa"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
<div class="table">
<el-table id="ajzbQuery"
<el-table
id="ajzbQuery"
ref="itsmDataTable"
:data="tableDataZylbfa"
:data="zdajFa.list"
tooltip-effect="dark"
width="98%"
size="small">
<el-table-column align="center"
v-for="columnTitle in propdefaultFormTheadZylbfa"
size="small"
>
<el-table-column
align="center"
v-for="columnTitle in propdefaultFormTheadZdaj"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width">
:width="columnTitle.width"
>
<template slot-scope="scope">
<div v-if="columnTitle.prop == 'asjbh'"
@click="goDetail(scope.row)"
style="
cursor: pointer;
color: #096cc9;
font-size: 13px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">
{{ scope.row[columnTitle.prop] }}
</div>
<div v-else-if="columnTitle.label == '发案环比'">
<span>上期:{{ scope.row["sqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span>
</div>
<div v-else-if="columnTitle.label == '发案同比'">
<!-- {{ item.split(":")[0] }}：{{
scope.row[item.split(":")[1]]
}} -->
<span>上期:{{ scope.row["tqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span>
</div>
<div v-else
v-html="scope.row[columnTitle.prop]"></div>
<div v-html="scope.row[columnTitle.prop]"></div>
</template>
</el-table-column>
</el-table>
</div>
<div class="subtitle"
style="margin-top: 20px"
id="xsajpaqk">
<!-- 八类案件发案情况 -->
<div class="subtitle" style="margin-top: 20px" id="blajfaqk">
3、八类案件发案情况
</div>
<div
id="blajfa"
ref="blajfa"
v-loading="blfaLoading"
element-loading-text="拼命加载中"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
<div class="table">
<Mytable
:tableData="tableDataBlfa"
:columObj="columObjBlfa"
id="vcfResult"
:pageObj="pageObjBlfa"
@handleSizeChange="handleSizeChangeBlfa"
@handleCurrentChange="handleCurrentChangeBlfa"
></Mytable>
</div>
<!-- 主要案件类别发案情况 -->
<div class="subtitle" style="margin-top: 20px" id="zyfaqk">
4、主要案件类别发案情况
</div>
<div
id="zyfa"
ref="zyfa"
v-loading="zyfaLoading"
element-loading-text="拼命加载中"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
<div class="table">
<Mytable
:tableData="tableDataZyfa"
:columObj="columObjZyfa"
id="vcfResult"
:pageObj="pageObjZyfa"
@handleSizeChange="handleSizeChangeZyfa"
@handleCurrentChange="handleCurrentChangeZyfa"
></Mytable>
</div>
<div class="subtitle" style="margin-top: 20px" id="xsajpaqk">
二、刑事案件破案情况
</div>
<div class="jqzs bj"
id="gxqpaqk">
<span>1、各辖区破案情况</span>
<p v-html="paqk"></p>
<div class="jqzs bj" id="xsajpaqk">
<span>1、各州地市破案情况</span>
<p>
本期 ({{ formData.fasjStart }}至{{
formData.fasjEnd
}}),全区破案总量最大的地州市是{{
JqzsPaMax.dwmc
}}，本期共破获案件{{ JqzsPaMax.fas }}起，占全区破案总数的{{
JqzsPaMax.fazb
}}
</p>
</div>
<div id="gxqpa"
<div
id="gxqpa"
ref="gxqpa"
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div class="table"
style="margin-top: 20px">
<el-table id="ajzbQuery"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
<div class="table" style="margin-top: 20px">
<el-table
id="ajzbQuery"
ref="itsmDataTable"
:data="tableDataPa"
tooltip-effect="dark"
width="98%"
size="small">
<el-table-column align="center"
size="small"
>
<el-table-column
align="center"
v-for="columnTitle in propdefaultFormTheadPa"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width">
:width="columnTitle.width"
>
<template slot-scope="scope">
<div v-if="columnTitle.prop == 'asjbh'"
<div
v-if="columnTitle.prop == 'asjbh'"
@click="goDetail(scope.row)"
style="
cursor: pointer;
......@@ -218,159 +319,97 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">
"
>
{{ scope.row[columnTitle.prop] }}
</div>
<div v-else-if="columnTitle.label == '破案环比'">
<span>上期:{{ scope.row["sqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span>
<span>环比上期:{{ scope.row["fahbs"] }}起</span>
<span
:class="
scope.row.hbAjclass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbAjclass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["fahb"] }}</span
>
</div>
<div v-else-if="columnTitle.label == '破案同比'">
<!-- {{ item.split(":")[0] }}：{{
scope.row[item.split(":")[1]]
}} -->
<span>上期:{{ scope.row["tqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span>
<span>同比去年:{{ scope.row["fatbs"] }}起</span>
<span
:class="
scope.row.tbAjclass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbAjclass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["fatb"] }}</span
>
</div>
<div v-else
v-html="scope.row[columnTitle.prop]"></div>
<div v-else v-html="scope.row[columnTitle.prop]"></div>
</template>
</el-table-column>
</el-table>
</div>
<div class="jqzs bj"
id="zylbpaqk">
<span>2、主要类别案件破案情况</span>
<p v-html="zylbpa"></p>
<div class="jqzs bj" id="zdajfaqk">
<span>2、重大案件破案情况</span>
<p>
本期 ({{ formData.fasjStart }}至{{
formData.fasjEnd
}}),全区共破获损失金额超过5万元以上案件{{
zdajPa.ssje5
}}，其中50万元以上案件{{ zdajPa.ssje50 }}起、100万元以上案件{{
zdajPa.ssje100
}}起、500万元以上案件{{
zdajPa.ssje500
}}起。
</p>
</div>
<div id="zylbpa"
ref="zylbpa"
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div
id="zdajfa"
ref="zdajfa"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
<div class="table">
<el-table id="ajzbQuery"
<el-table
id="ajzbQuery"
ref="itsmDataTable"
:data="tableDataZylbpa"
:data="zdajPa.list"
tooltip-effect="dark"
width="98%"
size="small">
<el-table-column align="center"
v-for="columnTitle in propdefaultFormTheadZylbpa"
size="small"
>
<el-table-column
align="center"
v-for="columnTitle in propdefaultFormTheadZdaj"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width">
:width="columnTitle.width"
>
<template slot-scope="scope">
<div v-if="columnTitle.prop == 'asjbh'"
@click="goDetail(scope.row)"
style="
cursor: pointer;
color: #096cc9;
font-size: 13px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">
{{ scope.row[columnTitle.prop] }}
</div>
<div v-else-if="columnTitle.label == '发案环比'">
<span>上期:{{ scope.row["sqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span>
</div>
<div v-else-if="columnTitle.label == '发案同比'">
<!-- {{ item.split(":")[0] }}：{{
scope.row[item.split(":")[1]]
}} -->
<span>上期:{{ scope.row["tqCount"] }}起|</span>
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span>
</div>
<div v-else
v-html="scope.row[columnTitle.prop]"></div>
<div v-html="scope.row[columnTitle.prop]"></div>
</template>
</el-table-column>
</el-table>
</div>
<div class="subtitle"
style="margin-top: 20px"
id="xyrqkfx">
三、案件嫌疑人情况分析
</div>
<div id="xyrnlfb"
ref="xyrnlfb"
style="height: 282px; width: 100%; padding-top: 36px"></div>
<div id="xyrhjfb"
ref="xyrhjfb"
style="height: 282px; width: 100%"></div>
<div id="xyrdazt"
ref="xyrdazt"
style="height: 240px; width: 100%; padding-bottom: 36px"></div>
<!-- 八类案件发案情况 -->
<div class="subtitle"
style="margin-top: 20px"
id="blajfaqk">
3、八类案件发案情况
</div>
<div id="blajfa"
ref="blajfa"
v-loading="blfaLoading"
element-loading-text="拼命加载中"
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div class="table">
<Mytable :tableData="tableDataBlfa"
:columObj="columObjBlfa"
id="vcfResult"
:pageObj="pageObjBlfa"
@handleSizeChange="handleSizeChangeBlfa"
@handleCurrentChange="handleCurrentChangeBlfa"></Mytable>
</div>
<!-- 主要案件类别发案情况 -->
<div class="subtitle"
style="margin-top: 20px"
id="zyfaqk">
4、主要案件类别发案情况
</div>
<div id="zyfa"
ref="zyfa"
v-loading="zyfaLoading"
element-loading-text="拼命加载中"
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div class="table">
<Mytable :tableData="tableDataZyfa"
:columObj="columObjZyfa"
id="vcfResult"
:pageObj="pageObjZyfa"
@handleSizeChange="handleSizeChangeZyfa"
@handleCurrentChange="handleCurrentChangeZyfa"></Mytable>
</div>
</div>
</div>
<div class="dt_menu">
<el-steps direction="vertical"
<el-steps
direction="vertical"
finish-status="wait"
space="100px"
:active="activeIndex">
<el-step v-for="(item, index) in menuList"
:active="activeIndex"
>
<el-step
v-for="(item, index) in menuList"
:key="item.id"
finish-status="wait"
@click.native="handleNav(index, item.id)">
<span slot="icon"
v-if="index == activeIndex">
<img src="@/assets/img/jt.png"
alt="" />
@click.native="handleNav(index, item.id)"
>
<span slot="icon" v-if="index == activeIndex">
<img src="@/assets/img/jt.png" alt="" />
</span>
<span slot="title"
<span
slot="title"
:class="
index == activeIndex
? item.color == '333'
......@@ -379,7 +418,8 @@
: item.color == '333'
? 'activeColor2'
: 'activeColor1'
">
"
>
{{ item.title }}
</span>
</el-step>
......@@ -389,43 +429,25 @@
</div>
</template>
<script>
import Mytable from '@/components/Mytable.vue'
import Mytable from "@/components/Mytable.vue";
import { zyfaData } from "./echarts/zyfa";
// import SelectTreeDialog from "@c/treeCode_components.vue";
import SelectTreeDialog from "@c/treeCode_components.vue";
// import {
// EsNldQuery,
// EshjfbQuery,
// EszhqkQuery,
// getGdAjQk,
// getZalbFpaTj,
// getJqzsQk,
// } from "@/api/ypbg.js";
import { zztCharts } from "./echarts/zztCharts";
import { getJqzs,getZdaj } from "@/api/ypbg.js";
export default {
components: {
Mytable, SelectTreeDialog
Mytable,
},
name: "ypbg",
// components: {
// SelectTreeDialog,
// },
data () {
data() {
return {
menuList: [
{ title: "警情综述", id: "#jbzs", color: "333" },
{ title: "一、发案情况", id: "#xsajfaqk", color: "333" },
{ title: "各辖区", id: "#gxqfaqk" },
{ title: "主要类别", id: "#zylbfaqk" },
{ title: "一、破案情况", id: "#xsajpaqk", color: "333" },
{ title: "各辖区", id: "#gxqpaqk" },
{ title: "主要类别", id: "#zylbpaqk" },
{ title: "三、嫌疑人情况分析", id: "#xyrqkfx", color: "333" },
{ title: "年龄段性别分析", id: "#xyrnlfb" },
{ title: "户籍分布", id: "#xyrhjfb" },
{ title: "到案状态", id: "#xyrdazt" },
{ title: "各州地市发案情况", id: "#xsajfaqk", color: "333" },
{ title: "重大案件发案情况", id: "#zdajfaqk", color: "333" },
{ title: "八类案件发案情况", id: "#blajfaqk" },
{ title: "主要案件类别发案情况", id: "#zyfaqk" },
{ title: "各州地市破案情况", id: "#xsajpaqk", color: "333" },
{ title: "重大案件破案情况", id: "#zdajpaqk", color: "333" },
],
activeIndex: 0,
emitSeleted: [],
......@@ -434,7 +456,7 @@ export default {
date: "",
asjfsddXzqhdm: "",
},
jqzs: "",
//各州地市发案情况
propQueryField: [
{
name: "发案时间",
......@@ -444,101 +466,116 @@ export default {
value: "",
col: "3",
},
{
name: "行政区划",
id: "asjfsddXzqhdm",
type: "codeTreeDialog", //字典弹框
props: [], //字典弹框需要的字段
codeOptions: [],
codeTree: "CODE_XZQH",
value: "",
col: "3",
},
],
paqk: "",
faqk: "",
tableDataFa: [],
JqzsFa: {},
JqzsFaMax: {},
JqzsFajeMax: {},
propdefaultFormTheadFa: [
{
label: "管辖单位",
prop: "name",
prop: "dwmc",
},
{
label: "发案数量",
prop: "bqCount",
label: "发案数",
prop: "fas",
},
{
label: "发案占比",
prop: "ajBfb",
prop: "fazb",
},
{
label: "发案环比",
prop: "cbxsypCbajs",
prop: "fahb",
},
{
label: "发案同比",
prop: "cbxsypCbajs",
prop: "fatb",
},
{
label: "损失金额(万)",
prop: "bqSsRMB",
label: "损失金额(元)",
prop: "ssje",
},
{
label: "损失占比",
prop: "fahb",
},
{
label: "损失环比",
prop: "sshb",
},
{
label: "损失同比",
prop: "sstb",
},
],
tableDataPa: [],
propdefaultFormTheadPa: [
//重大案件发案情况
zdajFa:{},
propdefaultFormTheadZdaj:[
{
label: "管辖单位",
prop: "name",
prop: "dwmc",
},
{
label: "破案数量",
prop: "bqCount",
label: "损失5-10万元",
prop: "ssje5",
},
{
label: "破案占比",
prop: "ajBfb",
label: "损失10-50万元",
prop: "ssje10",
},
{
label: "破案环比",
prop: "上期:sqCount起|hbAjBfb:hbAjBfb",
label: "损失50-100万元",
prop: "ssje50",
},
{
label: "破案同比",
prop: "patb",
label: "损失100-500万元",
prop: "ssje100",
},
{
label: "损失金额(万)",
prop: "bqSsRMB",
label: "损失500万元以上",
prop: "ssje500",
},
],
zylbfa: "",
tableDataZylbfa: [],
propdefaultFormTheadZylbfa: [
{
label: "案件类别",
prop: "name",
label: "损失金额合计",
prop: "ssje",
},
{
label: "发案数量",
prop: "bqCount",
label: "发案数",
prop: "ajs",
},
],
//各州地市破案情况
tableDataPa: [],
JqzsPa: {},
JqzsPaMax: {},
propdefaultFormTheadPa: [
{
label: "发案占比",
prop: "ajBfb",
label: "管辖单位",
prop: "dwmc",
},
{
label: "发案环比",
prop: "上期:sqCount起|hbAjBfb:hbAjBfb",
label: "破案数量",
prop: "fas",
},
{
label: "发案同比",
prop: "patb",
label: "破案占比",
prop: "fazb",
},
{
label: "损失金额(万)",
prop: "bqSsRMB",
label: "破案环比",
prop: "fahb",
},
{
label: "破案同比",
prop: "fatb",
},
],
//重大案件破案情况
zdajPa:{},
zylbfa: "",
tableDataZylbfa: [],
zylbpa: "",
tableDataZylbpa: [],
propdefaultFormTheadZylbpa: [
......@@ -568,39 +605,44 @@ export default {
},
],
// 八类案件发案
pageObjBlfa: { //分页对象
pageObjBlfa: {
//分页对象
total: null,
pageData: {
page: 1,
size: 10
}
size: 10,
},
},
tableDataBlfa: [],
columObjBlfa: {
visble: false,
loading: false,
columnData: [{
columnData: [
{
text: true,
prop: "deviceId",
editRow: undefined,
label: "发案数",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "deviceName",
editRow: undefined,
label: "发案占",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "captureUrl",
editRow: undefined,
label: "发案环比",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "panoramaUrl",
editRow: undefined,
......@@ -615,14 +657,16 @@ export default {
label: "损失金额（元）",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "alarmTime",
editRow: undefined,
label: "损失占比",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "faceName",
editRow: undefined,
......@@ -630,58 +674,63 @@ export default {
width: "",
align: "center",
},
]
],
},
blfaLoading: false,
// 主要案件发案
pageObjZyfa: { //分页对象
pageObjZyfa: {
//分页对象
total: null,
pageData: {
page: 1,
size: 10
}
size: 10,
},
},
tableDataZyfa: [],
columObjZyfa: {
visble: false,
loading: false,
columnData: [{
columnData: [
{
text: true,
prop: "deviceId",
editRow: undefined,
label: "案件类别",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "deviceName",
editRow: undefined,
label: "破案数",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "captureUrl",
editRow: undefined,
label: "破案占比",
width: "",
align: "center",
}, {
},
{
text: true,
prop: "panoramaUrl",
editRow: undefined,
label: "破案环比",
width: "",
align: "center",
}
]
},
],
},
zyfaLoading: false,
};
},
methods: {
// 八类案件发案饼状图
async getBlfaEcharts () {
async getBlfaEcharts() {
// this.blfaLoading = true;
// let params = new FormData();
......@@ -719,31 +768,40 @@ export default {
// });
// console.log(y, 111);
// }
let y = [{
name: '伤害案',
let y = [
{
name: "伤害案",
value: 12,
}, {
name: '杀人案',
},
{
name: "杀人案",
value: 5,
}, {
name: '放火案',
},
{
name: "放火案",
value: 2,
}, {
name: '抢劫案',
},
{
name: "抢劫案",
value: 2,
}, {
name: '强奸案',
},
{
name: "强奸案",
value: 2,
}, {
name: '爆炸案',
},
{
name: "爆炸案",
value: 2,
}, {
name: '绑架案',
},
{
name: "绑架案",
value: 2,
}, {
name: '劫持',
},
{
name: "劫持",
value: 2,
},]
},
];
let blfaEchart = this.$echarts.init(this.$refs.blajfa);
blfaEchart.setOption({
......@@ -755,9 +813,9 @@ export default {
textStyle: {
fontSize: 18,
color: "#242424",
fontWeight: '500',
fontStyle: 'normal',
verticalAlign: 'middle',
fontWeight: "500",
fontStyle: "normal",
verticalAlign: "middle",
lineHeight: 25,
},
},
......@@ -777,13 +835,12 @@ export default {
formatter: "{b}: {c} ({d}%)",
},
series: [
{
name: "",
type: "pie",
center: ["50%", "50%"],
radius: '60%',
radius: "60%",
avoidLabelOverlap: false,
// roseType: 'area',
......@@ -823,22 +880,21 @@ export default {
BlfaEchart.resize();
};
this.blfaLoading = false;
},
//页码变化
handleCurrentChangeBlfa (e) {
handleCurrentChangeBlfa(e) {
this.pageObjBlfa.pageData.page = e;
// this.getDetail()
},
//条数变化
handleSizeChangeBlfa (e) {
handleSizeChangeBlfa(e) {
this.pageObjBlfa.pageData.size = e;
this.pageObjBlfa.pageData.page = 1;
// this.getDetail()
},
// 主要案件类别发案情况
// 立案柱状图
async getZyfaEcharts () {
async getZyfaEcharts() {
this.zyfaLoading = true;
// let params = new FormData();
// params.append("larqQssj", this.value1);
......@@ -847,7 +903,7 @@ export default {
// let res = await getAjSwrstj(params);
// if (res && res.code == 200) {
let obj = { x: ['接触性诈骗', '非接触性诈骗'], y: [3, 5] };
let obj = { x: ["接触性诈骗", "非接触性诈骗"], y: [3, 5] };
// obj.tbbfb = res.data.result.tbbfb
// obj.y.push(res.data.result.qnzs);
......@@ -864,318 +920,185 @@ export default {
// }
},
//页码变化
handleCurrentChangeZyfa (e) {
handleCurrentChangeZyfa(e) {
this.pageObjZyfa.pageData.page = e;
// this.getDetail()
},
//条数变化
handleSizeChangeZyfa (e) {
handleSizeChangeZyfa(e) {
this.pageObjZyfa.pageData.size = e;
this.pageObjZyfa.pageData.page = 1;
// this.getDetail()
},
//导航菜单切换
handleNav (index, id) {
this.activeIndex = index;
document.querySelector(id).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
},
getCodeSeleted (codeValue, item) {
this.getSeleted(item, codeValue);
},
getSeleted (item, value, flag) {
let self = this;
let ret2 = self.emitSeleted.find((v) => {
return v.id == item.id;
});
if (value != "" && value != null) {
if (!flag) {
if (item.id == "flxx") {
item.name = "分类信息";
}
item.value = value;
if (ret2 == undefined) {
if (item.type == "daterange") {
item.value1 = item.value[0];
item.value2 = item.value[1];
}
this.$set(self.emitSeleted, self.emitSeleted.length, item);
} else {
if (item.type == "daterange") {
item.value1 = item.value[0];
item.value2 = item.value[1];
}
var dateIndex = self.emitSeleted.findIndex((val) => {
return val.id === item.id;
});
this.$set(self.emitSeleted, dateIndex, item);
}
} else {
if (ret2 != undefined) {
if (ret2.id == "flxx") {
ret2.value = value;
} else {
ret2.value2 = value;
}
} else {
item.value2 = value;
this.$set(self.emitSeleted, self.emitSeleted.length, item);
}
}
self.$emit("getSelected", self.emitSeleted);
} else {
var index = self.emitSeleted.findIndex((val) => {
return val.id === item.id;
});
if (item.id2) {
if (flag) {
item.value2 = "";
this.$set(self.emitSeleted, index, item);
self.$emit("getSelected", self.emitSeleted);
} else {
item.value = "";
this.$set(self.emitSeleted, index, item);
self.$emit("getSelected", self.emitSeleted);
}
if (item.value == "" && item.value2 == "") {
self.emitSeleted.splice(index, 1);
self.$emit("getSelected", self.emitSeleted, item);
}
} else {
self.emitSeleted.splice(index, 1);
self.$emit("getSelected", self.emitSeleted, item);
}
}
},
print () {
window.print();
},
getJqzs () {
var self = this;
getJqzsQk({
asjfsddXzqhdm: this.formData.asjfsddXzqhdm,
asjfssjAsjfskssjStart: this.formData.fasjStart,
asjfssjAsjfskssjEnd: this.formData.fasjEnd,
zczj: "0",
}).then((res) => {
if (res.code == 200) {
self.jqzs = res.data.fpaQk;
}
});
},
formatDate (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
},
formatStartDate (date) {
var y = date.getFullYear();
return y + "-01-01";
},
doQuery () {
let unitcode = JSON.parse(
sessionStorage.getItem("userInfo")
).unitcode.slice(0, 6);
if (!this.formData.asjfsddXzqhdm) {
if (unitcode != "010000") {
this.$message.error("请选择行政单位");
} else {
this.loading = this.$loading({
lock: true,
text: "正在查询...",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.7)",
});
this.getJqzs();
this.getGxqPa();
this.getGxFa();
this.getXyrnlfb();
this.getXyrhjfb();
this.getXyrdazt();
this.getZalbTj();
this.getZalbTjs();
}
} else {
this.loading = this.$loading({
lock: true,
text: "正在查询...",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.7)",
});
this.getJqzs();
this.getGxqPa();
this.getGxFa();
this.getXyrnlfb();
this.getXyrhjfb();
this.getXyrdazt();
this.getZalbTj();
this.getZalbTjs();
this.getBlfaEcharts();
}
},
getGxFa () {
var self = this;
let highRiskX = [];
let highRiskData = [];
getGdAjQk({
asjfsddXzqhdm: this.formData.asjfsddXzqhdm,
asjfssjAsjfskssjStart: this.formData.fasjStart,
asjfssjAsjfskssjEnd: this.formData.fasjEnd,
zczj: "0",
}).then((res) => {
if (res.code == 200) {
self.faqk = res.data.fpaQk;
self.tableDataFa = res.data.rows;
res.data.rows.forEach((item) => {
highRiskX.push(item.name);
highRiskData.push(item.bqCount);
});
self.getGdAjQkFa(highRiskX, highRiskData);
}
});
},
getGdAjQkFa (x, data) {
let myChart = this.$echarts.init(this.$refs.gxqfa);
myChart.setOption({
title: {
text: "辖区类案发案情况",
textStyle: {
color: "#333",
fontWeight: 800,
fontSize: 16,
},
left: 35,
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
top: "20%",
left: "8%",
right: "10%",
bottom: "20%",
// containLabel: true
},
xAxis: [
{
type: "category",
axisLine: {
show: false,
color: "#A582EA",
},
axisLabel: {
color: "#666",
clickable: true,
interval: 0,
formatter: function (params) {
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 2; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName;
},
},
splitLine: {
show: false,
},
boundaryGap: true,
data: x,
},
],
yAxis: [
{
type: "value",
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#00BFF3",
opacity: 0.23,
type: "dashed",
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: "#939FB3",
},
},
axisTick: {
show: false,
},
//导航菜单切换
handleNav(index, id) {
this.activeIndex = index;
document.querySelector(id).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
},
],
legend: {
right: 35,
top: 12,
textStyle: {
color: "#fff",
print() {
window.print();
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
//各地州市发破案情况
getFpaqk() {
var self = this;
getJqzs({
startDate: this.formData.fasjStart,
endDate: this.formData.fasjEnd,
}).then((res) => {
const {
code,
data: { fa, pa, faMax, paMax, fajeMax },
} = res;
if (code == 200) {
self.tableDataFa = fa;
self.tableDataPa = pa;
self.JqzsFa = fa[self.tableDataFa.length - 1];
self.JqzsPa = fa[self.tableDataPa.length - 1];
self.JqzsFaMax = faMax;
self.JqzsPaMax = paMax;
self.JqzsFajeMax = fajeMax;
let namefa = [],
valuefa = [];
fa.forEach((item, index) => {
if (index == self.tableDataPa.length - 1) {
return;
}
namefa.push(item.dwmc);
valuefa.push(item.fas);
});
let objfa = { x: namefa, y: valuefa, title: "辖区各地发案情况" };
let gxqfaEcharts = this.$echarts.init(this.$refs.gxqfa);
window.onresize = () => {
gxqfaEcharts.resize();
};
let faParams = zztCharts(objfa);
gxqfaEcharts.setOption(faParams);
let namepa = [],
valuepa = [];
pa.forEach((item, index) => {
if (index == self.tableDataPa.length - 1) {
return;
}
namepa.push(item.dwmc);
valuepa.push(item.fas);
});
let objpa = { x: namepa, y: valuepa, title: "辖区各地破案情况" };
let gxqpaEcharts = this.$echarts.init(this.$refs.gxqpa);
window.onresize = () => {
gxqpaEcharts.resize();
};
let paParams = zztCharts(objpa);
gxqpaEcharts.setOption(paParams);
}
});
},
series: [
{
type: "bar",
data: data,
barWidth: "24px",
barCategoryGap: "10%",
itemStyle: {
barBorderRadius: [4, 4, 0, 0],
color: "rgba(255, 195, 109, 1)",
getZdajqk(){
var self = this;
getZdaj({
startDate: this.formData.fasjStart,
endDate: this.formData.fasjEnd,
}).then((res) => {
const {
code,
data: { fa, pa },
} = res;
if (code == 200) {
self.zdajFa = fa;
self.zdajPa = pa;
let namefa = [],
valuefa = [];
fa.list.forEach((item, index) => {
if (index == self.tableDataPa.length - 1) {
return;
}
namefa.push(item.dwmc);
valuefa.push(item.ajs);
});
let objfa = { x: namefa, y: valuefa, title: "重大案件发案情况" };
let gxqfaEcharts = this.$echarts.init(this.$refs.zdajfa);
window.onresize = () => {
gxqfaEcharts.resize();
};
let faParams = zztCharts(objfa);
gxqfaEcharts.setOption(faParams);
let namepa = [],
valuepa = [];
pa.list.forEach((item, index) => {
if (index == self.tableDataPa.length - 1) {
return;
}
namepa.push(item.dwmc);
valuepa.push(item.ajs);
});
let objpa = { x: namepa, y: valuepa, title: "辖区各地破案情况" };
let gxqpaEcharts = this.$echarts.init(this.$refs.gxqpa);
window.onresize = () => {
gxqpaEcharts.resize();
};
let paParams = zztCharts(objpa);
gxqpaEcharts.setOption(paParams);
}
})
},
formatDate(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
},
formatStartDate(date) {
var y = date.getFullYear();
return y + "-01-01";
},
],
doQuery() {
let unitcode = JSON.parse(
sessionStorage.getItem("userInfo")
).unitcode.slice(0, 6);
if (!this.formData.asjfsddXzqhdm) {
if (unitcode != "010000") {
this.$message.error("请选择行政单位");
} else {
this.loading = this.$loading({
lock: true,
text: "正在查询...",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.7)",
});
window.addEventListener("resize", () => {
myChart.resize();
this.getFpaqk();
this.getXyrnlfb();
this.getXyrhjfb();
this.getXyrdazt();
this.getZalbTj();
this.getZalbTjs();
}
} else {
this.loading = this.$loading({
lock: true,
text: "正在查询...",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.7)",
});
this.loading.close();
this.getFpaqk();
this.getXyrnlfb();
this.getXyrhjfb();
this.getXyrdazt();
this.getZalbTj();
this.getZalbTjs();
this.getBlfaEcharts();
}
},
getZalbTj () {
getZalbTj() {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -1197,7 +1120,7 @@ export default {
}
});
},
getgetZalbFpaTj (x, data) {
getgetZalbFpaTj(x, data) {
let myChart = this.$echarts.init(this.$refs.zylbfa);
myChart.setOption({
title: {
......@@ -1297,7 +1220,7 @@ export default {
myChart.resize();
});
},
getZalbTjs () {
getZalbTjs() {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -1319,7 +1242,7 @@ export default {
}
});
},
getgetZalbFpaTjs (x, data) {
getgetZalbFpaTjs(x, data) {
let myChart = this.$echarts.init(this.$refs.zylbpa);
myChart.setOption({
title: {
......@@ -1419,163 +1342,7 @@ export default {
myChart.resize();
});
},
getGxqPa () {
var self = this;
let highRiskX = [];
let highRiskData = [];
getGdAjQk({
asjfsddXzqhdm: this.formData.asjfsddXzqhdm,
asjfssjAsjfskssjStart: this.formData.fasjStart,
asjfssjAsjfskssjEnd: this.formData.fasjEnd,
zczj: "1",
}).then((res) => {
if (res.code == 200) {
self.paqk = res.data.fpaQk;
res.data.rows.forEach((item) => {
// item.pahb = `上期(${item.sqCount})`
// item.patb =
highRiskX.push(item.name);
highRiskData.push(item.bqCount);
});
self.tableDataPa = res.data.rows;
self.getGdAjQkPa(highRiskX, highRiskData);
}
});
},
getGdAjQkPa (x, data) {
let myChart = this.$echarts.init(this.$refs.gxqpa);
myChart.setOption({
title: {
text: "各辖区破案情况",
textStyle: {
color: "#333",
fontWeight: 800,
fontSize: 16,
},
left: 35,
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
top: "20%",
left: "8%",
right: "10%",
bottom: "20%",
// containLabel: true
},
xAxis: [
{
type: "category",
axisLine: {
show: false,
color: "#A582EA",
},
axisLabel: {
color: "#666",
clickable: true,
interval: 0,
formatter: function (params) {
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 2; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName;
},
},
splitLine: {
show: false,
},
boundaryGap: true,
data: x,
},
],
yAxis: [
{
type: "value",
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#00BFF3",
opacity: 0.23,
type: "dashed",
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: "#939FB3",
},
},
axisTick: {
show: false,
},
},
],
legend: {
right: 35,
top: 12,
textStyle: {
color: "#fff",
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
series: [
{
type: "bar",
data: data,
barWidth: "24px",
barCategoryGap: "10%",
itemStyle: {
barBorderRadius: [4, 4, 0, 0],
color: "#6EBBFF",
},
},
],
});
window.addEventListener("resize", () => {
myChart.resize();
});
},
getXyrnlfb () {
getXyrnlfb() {
var self = this;
let nlData = [];
let lineData1 = [];
......@@ -1597,7 +1364,7 @@ export default {
}
});
},
getEsNldQuery (data1, data2, nlData) {
getEsNldQuery(data1, data2, nlData) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(this.$refs.xyrnlfb);
......@@ -1761,7 +1528,7 @@ export default {
myChart.resize();
});
},
getXyrhjfb () {
getXyrhjfb() {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -1779,7 +1546,7 @@ export default {
}
});
},
getEshjfbQuery (x, data) {
getEshjfbQuery(x, data) {
let myChart = this.$echarts.init(this.$refs.xyrhjfb);
myChart.setOption({
title: {
......@@ -1911,7 +1678,7 @@ export default {
myChart.resize();
});
},
getXyrdazt () {
getXyrdazt() {
var self = this;
EszhqkQuery({
asjfsddXzqhdm: this.formData.asjfsddXzqhdm,
......@@ -1928,7 +1695,7 @@ export default {
}
});
},
setEszhqkQuery (data) {
setEszhqkQuery(data) {
//颜色组
const colorList = [
"#FDB36A",
......@@ -2022,16 +1789,16 @@ export default {
});
},
},
created () {
this.$set(this.formData, 'fasjStart', this.formatStartDate(new Date()))
this.$set(this.formData, 'fasjEnd', this.formatDate(new Date()))
created() {
this.$set(this.formData, "fasjStart", this.formatStartDate(new Date()));
this.$set(this.formData, "fasjEnd", this.formatDate(new Date()));
let unitcode = JSON.parse(
sessionStorage.getItem("userInfo")
).unitcode.slice(0, 6);
let unit = unitcode == "010000" ? "" : unitcode;
this.$set(this.formData, "asjfsddXzqhdm", unit);
},
mounted () {
mounted() {
var self = this;
// this.loading = this.$loading({
// lock: true,
......@@ -2039,60 +1806,15 @@ export default {
// spinner: "el-icon-loading",
// background: "rgba(255, 255, 255, 0.7)",
// });
self.propQueryField.forEach((val) => {
if (val.type == "code" || val.type == "codeTreeDialog") {
if (val.codeOptions.length == 0) {
axios
.get(`JsonData/${val.codeTree}.json`)
.then((res) => {
let unitcode = JSON.parse(
sessionStorage.getItem("userInfo")
).unitcode.slice(0, 6);
debugger;
let arr1 = res.data.data.rows.filter(
(item) => item.id.slice(0, 2) == unitcode.slice(0, 2)
);
let arr2 = [];
let arr3 = [];
let arr4 = [];
if (arr1.length > 0) {
arr2 = arr1[0].children.filter(
(item) => item.id.slice(0, 4) == unitcode.slice(0, 4)
);
}
if (arr2.length > 0) {
arr3 = arr2[0].children.filter(
(item) => item.id.slice(0, 6) == unitcode
);
}
arr4 =
unitcode == "010000"
? res.data.data.rows
: arr3.length > 0
? arr3
: arr2.length > 0
? arr2
: arr1;
if (arr4.length > 0) {
self.$set(val, "codeOptions", arr4);
}
})
.catch((err) => {
console.log(err);
});
}
}
});
// this.getJqzs();
// this.getGxqPa();
// this.getGxFa();
this.getFpaqk();
this.getZdajqk();
// this.getXyrnlfb();
// this.getXyrhjfb();
// this.getXyrdazt();
// this.getZalbTj();
// this.getZalbTjs();
this.getBlfaEcharts()
this.getZyfaEcharts()
this.getBlfaEcharts();
this.getZyfaEcharts();
},
};
</script>
......@@ -2307,13 +2029,13 @@ export default {
padding-left: 16px;
font-size: 14px;
}
.upclass {
color: #ef4c4c;
}
.upclass {
color: #ef4c4c !important;
padding-left: 5px;
}
.downclass {
color: #35ca1e;
}
.downclass {
color: #35ca1e !important;
padding-left: 5px;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment