Skip to content

F
founder_vue
Commit 82663466 by yuhao
Options

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

parent a115ef6d
Showing with 412 additions and 0 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
}
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