Skip to content

F
founder_vue
Commit 82663466 by yuhao
Options

添加八类案件和主要案件图表

parent a115ef6d
Showing with 912 additions and 200 deletions
src/components/Mytable.vue 0 → 100644
<template>
<div class="tableCon">
<el-table :data="tableData"
element-loading-text="加载中..."
tooltip-effect="dark"
:header-cell-style="{ textAlign: 'center',background: '#FAFAFA' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
border
v-loading="columObj.loading">
<!-- 选择框是否开启，selectable控制是否单行禁用 -->
<el-table-column v-if="columObj.selection"
type="selection"
:selectable="columObj.selectable">
</el-table-column>
<!-- 普通列 -->
<el-table-column v-for="(column,columIndex) in columObj.columnData"
:key="columIndex"
:prop="column.prop"
:label="column.label"
:width="column.width"
:fixed="column.fixed"
:align="column.align || 'center'"
:sortable="column.sortable"
:show-overflow-tooltip="column.showToolTip"
:index="columIndex">
<template slot-scope="{row,$index}">
<!-- 操作按钮 -->
<!-- 基础操作 -->
<template v-if="column.type=='basic'">
<span v-for="(operations, index) in column.operation"
:key="index">
<el-button :icon="operations.icon"
:type="operations.type"
v-if="row.czqxList.indexOf(operations.option)!=-1"
@click="rowOperation(row,index,operations.option)"
:style="{color:operations.color}"
size="mini">{{ operations.label }}</el-button>
</span>
</template>
<!-- 操作 -->
<template v-if="column.type=='basicDetail'">
<span v-for="(operations, index) in column.operation"
:key="index">
<el-button :icon="operations.icon"
:type="operations.type"
@click="rowOperation(row,index,operations.option)"
:style="{color:operations.color}"
size="mini">{{ operations.label }}</el-button>
</span>
</template>
<!-- 默认展示 -->
<span v-if="column.text && column.editRow != $index">
{{ (row[column.prop] + '') || '--' }}
</span>
<!-- 大文本内容展示 -->
<template v-if="column.textarea && column.editRow != $index">
<span v-if="(row[column.prop]+'').length >= 50 && !row.expandContent">
{{ row[column.prop].substring(0, 50) }}...
</span>
<span v-if="(row[column.prop]+'').length < 50 || row.expandContent">
{{ (row[column.prop] + '') || '--' }}
</span>
<el-button-group v-if="(row[column.prop]+'').length >= 50"
style="float: right">
<el-button v-if="!row.expandContent"
type="text"
size="mini"
@click="row.expandContent = true">展开
</el-button>
<el-button v-if="row.expandContent"
type="text"
size="mini"
@click="row.expandContent = false">收起
</el-button>
</el-button-group>
</template>
<!-- 按钮展示 -->
<span v-if="column.edit && column.editRow != $index"
@click="rowBtn(row,column.prop)"
style="cursor: pointer;color: #409EFF;">
{{ (row[column.prop] + '') || '--' }}
</span>
<!-- 部分按钮展示 -->
<span v-if="column.editPart && column.editRow != $index">
<span @click="row.name&&row.name!=='合计'&&row.unitgrade>4&&row.ifslgzd !='true'? rowBtn(row,column.prop):''"
:style="row.name&&row.name!=='合计'&&row.unitgrade>4&&row.ifslgzd !='true'? 'cursor: pointer;color: #409EFF;':''"> {{
(row[column.prop] + '') || '--'
}}</span>
<span></span>
</span>
<!-- 有颜色字体 -->
<span v-if="column.colorText ">
<template>
<span v-if="row.dzztText=='待审核'"
style="color:#F78A0D"> {{ (row[column.prop] + '') || '--' }}</span>
<span v-else-if="row.dzztText=='审核通过已回复'"
style="color:#02A7F0"> {{ (row[column.prop] + '') || '--' }}</span>
<span v-else-if="row.dzztText=='审核通过未回复'"
style="color:#30BE1A"> {{ (row[column.prop] + '') || '--' }}</span>
<span v-else-if="row.dzztText=='审核不通过'"
style="color:#E83334"> {{ (row[column.prop] + '') || '--' }}</span>
<span v-else-if="row.dzztText=='已回复未反馈'"
style="color: #30BE1A"> {{ (row[column.prop] + '') || '--' }}</span>
<span v-else-if="row.dzztText=='已回复已反馈'"
style="color:#02A7F0"> {{ (row[column.prop] + '') || '--' }}</span>
<span v-else
style="color:#4B4B4B"> {{ (row[column.prop] + '') || '--' }}</span>
</template>
</span>
<!-- 状态对象展示 -->
<span v-if="column.status
&&
row[column.prop]">{{ row[column.prop].msg }}</span>
<!-- 自定义内容 -->
<span v-if="column.ownDefined">{{ column.ownDefinedReturn(row, $index) }}</span>
</template>
<!-- 嵌套表格 -->
<template v-if="column.option&&column.option.length>0">
<el-table-column v-for="inner in column.option"
:key="inner.label"
:label="inner.label"
:width="inner.width"
:show-overflow-tooltip="true">
<template slot-scope="{row}">
<span v-if="inner.edit"
@click="rowBtn(row,inner.prop)"
style="cursor: pointer;color: #409EFF;;">
{{ (row[inner.prop] + '') || '--' }}
</span>
<span v-else>
{{ (row[inner.prop] + '') || '--' }}
</span>
</template>
</el-table-column>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="page_div"
:style="{textAlign: 'right'}">
<el-pagination v-if="columObj.pagination!='noPage'"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageObj.pageData.page"
:page-sizes="[10, 15, 20, 30,50]"
:page-size="pageObj.pageData.size"
background
layout="sizes,prev, pager, next,jumper"
:total="pageObj.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
required: true
},
columObj: {
type: Object,
required: true
},
pageObj: {
type: Object,
required: true
}
},
methods: {
// 详情按钮
rowBtn (row, $index) {
this.$emit("rowBtn", row, $index)
},
// 行操作
rowOperation (row, $index, now) {
this.$emit("rowOperation", row, $index, now)
},
// 条数变化
handleSizeChange (e) {
this.$emit('handleSizeChange', e);
},
// 页码变化
handleCurrentChange (e) {
this.$emit('handleCurrentChange', e);
},
// 导出数据
exportData () {
this.$emit('exportData', '')
}
},
}
</script>
<style lang="scss" scoped>
.table-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.table-info-left {
span {
display: inline-block;
font-style: normal;
}
.table-title {
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-right: 20px;
}
.table-total {
font-size: 16px;
color: #777777;
}
.el-button {
width: 90px;
// height: 32px;
padding: 10px 0;
box-sizing: border-box;
}
.table-info {
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: #383838;
margin-left: 20px;
}
}
}
.page_div {
margin-top: 20px;
text-align: right;
height: 48px;
line-height: 48px;
}
.el-pagination {
text-align: right !important;
padding-right: 24px;
}
</style>
\ No newline at end of file
src/views/index/echarts/zyfa.js 0 → 100644
import echarts from 'echarts'
// 主要发案
export function zyfaData (row) {
let option = {
title: {
text: `辖区类案发案情况`,
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'">
......@@ -52,52 +45,53 @@
</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>
</div>
<div class="subtitle" id="xsajfaqk">一、刑事案件发案情况</div>
<div class="jqzs bj" id="gxqfaqk">
<div class="subtitle"
id="xsajfaqk">一、刑事案件发案情况</div>
<div class="jqzs bj"
id="gxqfaqk">
<span>1、各辖区发案情况</span>
<p v-html="faqk"></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;
......@@ -106,67 +100,55 @@
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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span
>
">{{ 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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span
>
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</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">
<div class="jqzs bj"
id="zylbfaqk">
<span>2、主要类别案件发案情况</span>
<p v-html="zylbfa"></p>
</div>
<div
id="zylbfa"
<div id="zylbfa"
ref="zylbfa"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div class="table">
<el-table
id="ajzbQuery"
<el-table id="ajzbQuery"
ref="itsmDataTable"
:data="tableDataZylbfa"
tooltip-effect="dark"
width="98%"
size="small"
>
<el-table-column
align="center"
size="small">
<el-table-column align="center"
v-for="columnTitle in propdefaultFormTheadZylbfa"
: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;
......@@ -175,70 +157,61 @@
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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span
>
">{{ 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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span
>
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</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="subtitle" style="margin-top: 20px" id="xsajpaqk">
<div class="subtitle"
style="margin-top: 20px"
id="xsajpaqk">
二、刑事案件破案情况
</div>
<div class="jqzs bj" id="gxqpaqk">
<div class="jqzs bj"
id="gxqpaqk">
<span>1、各辖区破案情况</span>
<p v-html="paqk"></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;
......@@ -247,67 +220,55 @@
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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span
>
">{{ 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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span
>
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</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">
<div class="jqzs bj"
id="zylbpaqk">
<span>2、主要类别案件破案情况</span>
<p v-html="zylbpa"></p>
</div>
<div
id="zylbpa"
<div id="zylbpa"
ref="zylbpa"
style="height: 400px; width: 100%; padding-top: 6px"
></div>
style="height: 400px; width: 100%; padding-top: 6px"></div>
<div class="table">
<el-table
id="ajzbQuery"
<el-table id="ajzbQuery"
ref="itsmDataTable"
:data="tableDataZylbpa"
tooltip-effect="dark"
width="98%"
size="small"
>
<el-table-column
align="center"
size="small">
<el-table-column align="center"
v-for="columnTitle in propdefaultFormTheadZylbpa"
: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;
......@@ -316,77 +277,102 @@
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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["hbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["hbAjBfb"] }}</span
>
">{{ 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="
<span :class="
scope.row.hbAjClass == 'up' ? 'upclass' : 'downclass'
"
>{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</span
>
">{{ scope.row["tbAjClass"] == "up" ? "⬆" : "⬇"
}}{{ scope.row["tbAjBfb"] }}</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="subtitle" style="margin-top: 20px" id="xyrqkfx">
<div class="subtitle"
style="margin-top: 20px"
id="xyrqkfx">
三、案件嫌疑人情况分析
</div>
<div
id="xyrnlfb"
<div id="xyrnlfb"
ref="xyrnlfb"
style="height: 282px; width: 100%; padding-top: 36px"
></div>
<div
id="xyrhjfb"
style="height: 282px; width: 100%; padding-top: 36px"></div>
<div id="xyrhjfb"
ref="xyrhjfb"
style="height: 282px; width: 100%"
></div>
<div
id="xyrdazt"
style="height: 282px; width: 100%"></div>
<div id="xyrdazt"
ref="xyrdazt"
style="height: 240px; width: 100%; padding-bottom: 36px"
></div>
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'
......@@ -395,8 +381,7 @@
: item.color == '333'
? 'activeColor2'
: 'activeColor1'
"
>
">
{{ item.title }}
</span>
</el-step>
......@@ -406,6 +391,9 @@
</div>
</template>
<script>
import Mytable from '@/components/Mytable.vue'
import { zyfaData } from "./echarts/zyfa";
// import SelectTreeDialog from "@c/treeCode_components.vue";
// import {
// EsNldQuery,
......@@ -416,11 +404,14 @@
// getJqzsQk,
// } from "@/api/ypbg.js";
export default {
components: {
Mytable
},
name: "ypbg",
// components: {
// SelectTreeDialog,
// },
data() {
data () {
return {
menuList: [
{ title: "警情综述", id: "#jbzs", color: "333" },
......@@ -434,6 +425,8 @@ export default {
{ title: "年龄段性别分析", id: "#xyrnlfb" },
{ title: "户籍分布", id: "#xyrhjfb" },
{ title: "到案状态", id: "#xyrdazt" },
{ title: "八类案件发案情况", id: "#blajfaqk" },
{ title: "主要案件类别发案情况", id: "#zyfaqk" },
],
activeIndex: 0,
emitSeleted: [],
......@@ -575,22 +568,326 @@ export default {
prop: "bqSsRMB",
},
],
// 八类案件发案
pageObjBlfa: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableDataBlfa: [],
columObjBlfa: {
visble: false,
loading: false,
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",
},
{
text: true,
prop: "captureTime",
editRow: undefined,
label: "损失金额（元）",
width: "",
align: "center",
}, {
text: true,
prop: "alarmTime",
editRow: undefined,
label: "损失占比",
width: "",
align: "center",
}, {
text: true,
prop: "faceName",
editRow: undefined,
label: "损失环比",
width: "",
align: "center",
},
]
},
blfaLoading: false,
// 主要案件发案
pageObjZyfa: { //分页对象
total: null,
pageData: {
page: 1,
size: 10
}
},
tableDataZyfa: [],
columObjZyfa: {
visble: false,
loading: false,
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 () {
// this.blfaLoading = true;
// let params = new FormData();
// params.append("larqQssj", this.value1);
// params.append("larqJssj", this.value2);
// params.append("unitcode", this.form.ssdwcode);
// let res = await getAjjgfbt(params);
// if (res && res.code == 200) {
// var y = []
// var sxajTotal = res.data.result.total
// y.push({
// name: '伤害案',
// value: res.data.result.blyzblcount,
// }, {
// name: '杀人案',
// value: res.data.result.dqcount,
// }, {
// name: '放火案',
// value: res.data.result.qdcount,
// }, {
// name: '抢劫案',
// value: res.data.result.btzpcount,
// }, {
// name: '强奸案',
// value: res.data.result.dxzpcount,
// }, {
// name: '爆炸案',
// value: res.data.result.dpfzajcount,
// }, {
// name: '绑架案',
// value: res.data.result.jjfzcount,
// }, {
// name: '劫持',
// value: res.data.result.qtCount,
// });
// console.log(y, 111);
// }
let y = [{
name: '伤害案',
value: 12,
}, {
name: '杀人案',
value: 5,
}, {
name: '放火案',
value: 2,
}, {
name: '抢劫案',
value: 2,
}, {
name: '强奸案',
value: 2,
}, {
name: '爆炸案',
value: 2,
}, {
name: '绑架案',
value: 2,
}, {
name: '劫持',
value: 2,
},]
let blfaEchart = this.$echarts.init(this.$refs.blajfa);
blfaEchart.setOption({
title: {
text: `八类案件发案情况`,
x: "center",
// y: "center",
// itemGap: -20,
textStyle: {
fontSize: 18,
color: "#242424",
fontWeight: '500',
fontStyle: 'normal',
verticalAlign: 'middle',
lineHeight: 25,
},
},
color: [
"#34A1FF",
"#FFD32C",
"#09977A",
"#5581FF",
"#86D507",
"#FF6B17",
"#FF72B8",
"#B399E6",
"#29D1FF",
],
tooltip: {
trigger: "item",
formatter: "{b}: {c} ({d}%)",
},
series: [
{
name: "",
type: "pie",
center: ["50%", "50%"],
radius: '60%',
avoidLabelOverlap: false,
// roseType: 'area',
labelLine: {
show: true,
normal: {
lineStyle: {
color: "#333",
},
// smooth: 0.2,
length: 30,
},
},
itemStyle: {
normal: {
//饼状图上的文本显示
label: {
show: true,
position: "top",
formatter: `{b}\n{d}%`, //数值和百分比
textStyle: {
fontSize: 12,
fontWeight: "bolder",
fontFamily: "din-regular",
},
},
labelLine: {
show: true, //显示饼状图上的文本时，指示线不显示，在第一个data时显示指示线
},
},
},
data: y,
},
],
});
window.onresize = () => {
BlfaEchart.resize();
};
this.blfaLoading = false;
},
//页码变化
handleCurrentChangeBlfa (e) {
this.pageObjBlfa.pageData.page = e;
// this.getDetail()
},
//条数变化
handleSizeChangeBlfa (e) {
this.pageObjBlfa.pageData.size = e;
this.pageObjBlfa.pageData.page = 1;
// this.getDetail()
},
// 主要案件类别发案情况
// 立案柱状图
async getZyfaEcharts () {
this.zyfaLoading = true;
// let params = new FormData();
// params.append("larqQssj", this.value1);
// params.append("larqJssj", this.value2);
// params.append("unitcode", this.form.ssdwcode);
// let res = await getAjSwrstj(params);
// if (res && res.code == 200) {
let obj = { x: ['接触性诈骗', '非接触性诈骗'], y: [3, 5] };
// obj.tbbfb = res.data.result.tbbfb
// obj.y.push(res.data.result.qnzs);
// obj.y.push(res.data.result.jnzs);
let zyfaEchart = this.$echarts.init(this.$refs.zyfa);
window.onresize = () => {
zyfaEchart.resize();
};
let cjParams = zyfaData(obj);
zyfaEchart.setOption(cjParams);
this.zyfaLoading = false;
// }
},
//页码变化
handleCurrentChangeZyfa (e) {
this.pageObjZyfa.pageData.page = e;
// this.getDetail()
},
//条数变化
handleSizeChangeZyfa (e) {
this.pageObjZyfa.pageData.size = e;
this.pageObjZyfa.pageData.page = 1;
// this.getDetail()
},
//导航菜单切换
handleNav(index, id) {
handleNav (index, id) {
this.activeIndex = index;
document.querySelector(id).scrollIntoView({
behavior: "smooth",
block: "end",
block: "start",
inline: "nearest",
});
},
getCodeSeleted(codeValue, item) {
getCodeSeleted (codeValue, item) {
this.getSeleted(item, codeValue);
},
getSeleted(item, value, flag) {
getSeleted (item, value, flag) {
let self = this;
let ret2 = self.emitSeleted.find((v) => {
return v.id == item.id;
......@@ -655,10 +952,10 @@ export default {
}
}
},
print() {
print () {
window.print();
},
getJqzs() {
getJqzs () {
var self = this;
getJqzsQk({
asjfsddXzqhdm: this.formData.asjfsddXzqhdm,
......@@ -671,7 +968,7 @@ export default {
}
});
},
formatDate(date) {
formatDate (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
......@@ -679,11 +976,11 @@ export default {
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
},
formatStartDate(date) {
formatStartDate (date) {
var y = date.getFullYear();
return y + "-01-01";
},
doQuery() {
doQuery () {
let unitcode = JSON.parse(
sessionStorage.getItem("userInfo")
).unitcode.slice(0, 6);
......@@ -721,9 +1018,10 @@ export default {
this.getXyrdazt();
this.getZalbTj();
this.getZalbTjs();
this.getBlfaEcharts();
}
},
getGxFa() {
getGxFa () {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -745,7 +1043,7 @@ export default {
}
});
},
getGdAjQkFa(x, data) {
getGdAjQkFa (x, data) {
let myChart = this.$echarts.init(this.$refs.gxqfa);
myChart.setOption({
title: {
......@@ -878,7 +1176,7 @@ export default {
});
this.loading.close();
},
getZalbTj() {
getZalbTj () {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -900,7 +1198,7 @@ export default {
}
});
},
getgetZalbFpaTj(x, data) {
getgetZalbFpaTj (x, data) {
let myChart = this.$echarts.init(this.$refs.zylbfa);
myChart.setOption({
title: {
......@@ -1000,7 +1298,7 @@ export default {
myChart.resize();
});
},
getZalbTjs() {
getZalbTjs () {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -1022,7 +1320,7 @@ export default {
}
});
},
getgetZalbFpaTjs(x, data) {
getgetZalbFpaTjs (x, data) {
let myChart = this.$echarts.init(this.$refs.zylbpa);
myChart.setOption({
title: {
......@@ -1122,7 +1420,7 @@ export default {
myChart.resize();
});
},
getGxqPa() {
getGxqPa () {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -1146,7 +1444,7 @@ export default {
}
});
},
getGdAjQkPa(x, data) {
getGdAjQkPa (x, data) {
let myChart = this.$echarts.init(this.$refs.gxqpa);
myChart.setOption({
title: {
......@@ -1278,7 +1576,7 @@ export default {
myChart.resize();
});
},
getXyrnlfb() {
getXyrnlfb () {
var self = this;
let nlData = [];
let lineData1 = [];
......@@ -1300,7 +1598,7 @@ export default {
}
});
},
getEsNldQuery(data1, data2, nlData) {
getEsNldQuery (data1, data2, nlData) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(this.$refs.xyrnlfb);
......@@ -1464,7 +1762,7 @@ export default {
myChart.resize();
});
},
getXyrhjfb() {
getXyrhjfb () {
var self = this;
let highRiskX = [];
let highRiskData = [];
......@@ -1482,7 +1780,7 @@ export default {
}
});
},
getEshjfbQuery(x, data) {
getEshjfbQuery (x, data) {
let myChart = this.$echarts.init(this.$refs.xyrhjfb);
myChart.setOption({
title: {
......@@ -1614,7 +1912,7 @@ export default {
myChart.resize();
});
},
getXyrdazt() {
getXyrdazt () {
var self = this;
EszhqkQuery({
asjfsddXzqhdm: this.formData.asjfsddXzqhdm,
......@@ -1631,7 +1929,7 @@ export default {
}
});
},
setEszhqkQuery(data) {
setEszhqkQuery (data) {
//颜色组
const colorList = [
"#FDB36A",
......@@ -1725,16 +2023,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,
......@@ -1794,6 +2092,8 @@ export default {
// this.getXyrdazt();
// this.getZalbTj();
// this.getZalbTjs();
this.getBlfaEcharts()
this.getZyfaEcharts()
},
};
</script>
......
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