122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<template>
|
|
<el-row :gutter="6">
|
|
<el-col :md="12" :sm="24">
|
|
<el-card shadow="hover">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>今日事件</span>
|
|
<el-button @click="moreEvent" type="primary" text>更多</el-button>
|
|
</div>
|
|
</template>
|
|
<scTable ref="table" :apiObj="apiObj" :params="params" row-key="id" fit stripe hideDo :height="tableHeight">
|
|
<el-table-column label="事件种类">
|
|
<template #default="scope">
|
|
<el-span v-for="item in scope.row.cates_" :key="item.id" :label="item.name" :value="item.id">{{
|
|
item.name }}/</el-span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="发生区域" prop="area_.name"></el-table-column>
|
|
<el-table-column label="当事人" prop="employee_.name">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.employee && scope.row.obj_cate == 'people'">{{ scope.row.employee_.name }}</span>
|
|
<span v-else>未知人员</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="发生时间" prop="create_time"></el-table-column>
|
|
</scTable>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :md="12" :sm="24">
|
|
<el-card shadow="hover">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>今日事件统计</span>
|
|
</div>
|
|
</template>
|
|
<scEcharts id="totalEchart" height="360px" :option="option3"></scEcharts>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import scEcharts from "@/components/scEcharts";
|
|
export default {
|
|
title: "关于项目",
|
|
icon: "el-icon-setting",
|
|
description: "点个星星支持一下",
|
|
components: {
|
|
scEcharts,
|
|
},
|
|
data() {
|
|
return {
|
|
apiObj:null,
|
|
dutyAgg: [],
|
|
postOptions: [],
|
|
option3: null,
|
|
divHeight:null,
|
|
tableHeight:null,
|
|
}
|
|
},
|
|
created() {
|
|
this.apiObj = this.$API.ecm.event.list;
|
|
var craeteTime = this.$TOOL.dateFormat(
|
|
new Date().toLocaleDateString(),
|
|
"yyyy-MM-dd"
|
|
);
|
|
|
|
this.postOptions = [];
|
|
this.$API.ecm.event.cateAgg.req({ completed: false, start_create: craeteTime })
|
|
.then((res) => {
|
|
res.details.forEach((itemI, indexI) => {
|
|
this.postOptions.push({ value: itemI.count, name: itemI.cate__name });
|
|
});
|
|
});
|
|
this.option3 = {
|
|
title: {},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
left: 'center'
|
|
},
|
|
series: [
|
|
{
|
|
name: "事件分类",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
center: ["50%", "60%"],
|
|
label: {
|
|
formatter: '{c}',
|
|
position: 'inside',
|
|
color: 'white'
|
|
},
|
|
data: this.postOptions,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted(){
|
|
let height1 = document.getElementsByClassName('widgets-content')[0].clientHeight;
|
|
console.log(height1)
|
|
let bottomHeight = height1-138-120;
|
|
this.tableHeight = bottomHeight/2-10;
|
|
this.divHeight = bottomHeight/2+'px';
|
|
|
|
document.getElementById('totalEchart').style.height = this.divHeight
|
|
},
|
|
methods: {
|
|
moreEvent() {
|
|
this.$router.push({
|
|
name: "event",
|
|
query: {},
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.item-background p {color: #999;margin-top:10px;line-height: 1.8;}
|
|
</style>
|