|
|
<template>
|
|
|
<div class="PsychologicalWarningSmall">
|
|
|
<div v-if="this.BaseConfig.person_info_my.cur_role.role_id.toString()==='2'" >
|
|
|
<a-tabs default-active-key="1" class="tab-style" >
|
|
|
<a-tab-pane key="1" tab="性别预警">
|
|
|
<m-bar-echarts
|
|
|
v-if="sexFlag"
|
|
|
:echartStyle="sexData.style"
|
|
|
:xAxisData="sexData.xAxisData"
|
|
|
:legendData="sexData.legendData"
|
|
|
:seriesData="sexData.seriesData"
|
|
|
:xAxisName="sexData.xAxisName"
|
|
|
:yAxisName="sexData.yAxisName"
|
|
|
>
|
|
|
</m-bar-echarts>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="2" tab="年级预警" >
|
|
|
<m-bar-echarts
|
|
|
v-if="gradeBarFlag"
|
|
|
:echartStyle="gradeData.style"
|
|
|
:xAxisData="gradeData.xAxisData"
|
|
|
:legendData="gradeData.legendData"
|
|
|
:seriesData="gradeData.seriesData"
|
|
|
:xAxisName="gradeData.xAxisName"
|
|
|
:yAxisName="gradeData.yAxisName"
|
|
|
>
|
|
|
</m-bar-echarts>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<div class="teacher">
|
|
|
<div class="header" style=" margin-left: 2rem;">
|
|
|
<div class="condition">
|
|
|
<span>选择日期：</span>
|
|
|
<a-range-picker @change="timeSelect" style="width:15rem;"/>
|
|
|
|
|
|
</div>
|
|
|
<div class="condition">
|
|
|
<span>年级：</span>
|
|
|
<a-select style="width:6rem;" v-if="gradeFlag" value-key="item.ENTRANCE_YEAR" :default-value=this.classYearList[0].ENTRANCE_YEAR
|
|
|
@change="handleSelectGrade($event)">
|
|
|
<a-select-option v-for="item in this.classYearList" :key="item.ENTRANCE_YEAR" :value="item.ENTRANCE_YEAR" >
|
|
|
{{ item.ENTRANCE_YEAR_TEXT }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
<div class="condition">
|
|
|
<span>班级：</span>
|
|
|
<a-select style="width:7.5rem;" v-if="classFlag" value-key="item.CLASS_ID" :default-value=this.classList[0].CLASS_ID
|
|
|
@change="handleSelectClass($event)">
|
|
|
<a-select-option v-for="item in this.classList" :key="item.CLASS_ID" :value="item.CLASS_ID" >
|
|
|
{{ item.CLASS_NAME }}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
<div class="condition">
|
|
|
<a-input-search placeholder="姓名/预警因子" style="width: 20rem" @search="onSearch" @change="onNameChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="header">
|
|
|
<div class="condition">
|
|
|
<img src="./image/red.png" class="img-style"/>
|
|
|
<span>红色预警</span>
|
|
|
</div>
|
|
|
<div class="condition">
|
|
|
<img src="./image/orange.png" class="img-style"/>
|
|
|
<span>橙色预警</span>
|
|
|
</div>
|
|
|
<div class="condition">
|
|
|
<img src="./image/yellow.png" class="img-style"/>
|
|
|
<span>黄色预警</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-table :columns="columns" :data-source="tableData" @change="onChange" size="small" style="width:100%;margin-bottom: 1rem"
|
|
|
:pagination="{current:page_number,pageSize:page_size,hideOnSinglePage:true,total:total_row}"
|
|
|
>
|
|
|
<div slot="pic" slot-scope="text, record" >
|
|
|
<div v-if="record.WARNING_LEVEL===1" style="text-align: center">
|
|
|
<img src="./image/yellow.png" class="img-style"/>
|
|
|
</div>
|
|
|
<div v-else-if="record.WARNING_LEVEL===2" style="text-align: center">
|
|
|
<img src="./image/orange.png" class="img-style"/>
|
|
|
</div>
|
|
|
<div v-else style="text-align: center">
|
|
|
<img src="./image/red.png" class="img-style"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-table>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
Tabs,
|
|
|
Input,
|
|
|
Select,
|
|
|
DatePicker,
|
|
|
Table,
|
|
|
} from 'ant-design-vue'
|
|
|
import mBarEcharts from './../educationalWisdom/utils/BarEcharts'
|
|
|
import InterfaceConfig from './utils/interfaceConfig'
|
|
|
export default {
|
|
|
name: 'PsychologicalWarningSmall',
|
|
|
components: {
|
|
|
mBarEcharts,
|
|
|
ATabs: Tabs,
|
|
|
ATabPane: Tabs.TabPane,
|
|
|
ATable:Table,
|
|
|
ARangePicker:DatePicker.RangePicker,
|
|
|
ASelect:Select,
|
|
|
ASelectOption:Select.Option,
|
|
|
AInputSearch:Input.Search,
|
|
|
},
|
|
|
data:function () {
|
|
|
return {
|
|
|
page_number:1,//当前页码
|
|
|
page_size:10,//每页显示条数
|
|
|
total_row:1,//共有多少行
|
|
|
sexFlag:false,
|
|
|
gradeFlag:false,
|
|
|
gradeBarFlag:false,
|
|
|
classFlag:false,
|
|
|
tableFlag:false,
|
|
|
year:'',
|
|
|
class_id:'',
|
|
|
classYearList:[{
|
|
|
ENTRANCE_YEAR_TEXT: "全部",
|
|
|
ENTRANCE_YEAR: ""
|
|
|
}],
|
|
|
classList:[{
|
|
|
CLASS_ID: "",
|
|
|
CLASS_NAME: "全部"
|
|
|
}],
|
|
|
|
|
|
sexData:{
|
|
|
style:{
|
|
|
height:''
|
|
|
},
|
|
|
xAxisData:[],
|
|
|
legendData:[],
|
|
|
seriesData:[],
|
|
|
xAxisName:"",
|
|
|
yAxisName:"人数",
|
|
|
},
|
|
|
gradeData:{
|
|
|
style:{
|
|
|
height:''
|
|
|
},
|
|
|
xAxisData:[],
|
|
|
legendData:[],
|
|
|
seriesData:[],
|
|
|
xAxisName:"",
|
|
|
yAxisName:"人数",
|
|
|
},
|
|
|
start_date: '',
|
|
|
end_date:'',
|
|
|
keyword:'',
|
|
|
index:1,
|
|
|
sort_type:1,
|
|
|
tableData:[],
|
|
|
columns : [
|
|
|
{
|
|
|
title: '预警等级',
|
|
|
dataIndex: 'WARNING_LEVEL',
|
|
|
width: 40,
|
|
|
align:'center',
|
|
|
scopedSlots: { customRender: 'pic' }
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
dataIndex: 'STUDENT_NAME',
|
|
|
width:50,
|
|
|
align:'center',
|
|
|
},
|
|
|
{
|
|
|
title: '班级',
|
|
|
dataIndex: 'CLASS_NAME',
|
|
|
width: 70,
|
|
|
align:'center',
|
|
|
|
|
|
},
|
|
|
{
|
|
|
title: '预警来源',
|
|
|
dataIndex: 'WARNING_SOURCE',
|
|
|
width: 90,
|
|
|
align:'center',
|
|
|
|
|
|
}, {
|
|
|
title: '预警时间',
|
|
|
dataIndex: 'CREATE_TIME',
|
|
|
defaultSortOrder: 'descend',
|
|
|
sorter: (a, b) => a.score - b.score,
|
|
|
width: 60,
|
|
|
align:'center',
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
// 获取屏幕高度
|
|
|
this.sexData.style.height = '370px';
|
|
|
this.gradeData.style.height = '370px';
|
|
|
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
if(this.BaseConfig.person_info_my.cur_role.role_id.toString()==='2'){
|
|
|
this.getWarningDistribution('gender');
|
|
|
this.getWarningDistribution('grade');
|
|
|
}else if(this.BaseConfig.person_info_my.cur_role.role_id.toString()==='4'){
|
|
|
this.getClassYear();
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
//table
|
|
|
onChange:function (pagination, filters, sorter) {
|
|
|
this.page_number=pagination.current;
|
|
|
this.page_size=pagination.pageSize;
|
|
|
if(sorter.field==="CREATE_TIME"){
|
|
|
if(sorter.order==="descend"){
|
|
|
this.sort_type=2;
|
|
|
}else{
|
|
|
this.sort_type=1;
|
|
|
}
|
|
|
this.getWarningList(this.keyword);
|
|
|
}
|
|
|
},
|
|
|
//姓名，因子搜索
|
|
|
onSearch:function (value) {
|
|
|
this.getWarningList(value);
|
|
|
},
|
|
|
|
|
|
onNameChange:function (e) {
|
|
|
this.keyword=e.target.value;
|
|
|
},
|
|
|
//选择年级
|
|
|
handleSelectGrade:function (key) {
|
|
|
this.year=key;
|
|
|
this.getClassList();
|
|
|
},
|
|
|
//选择班级
|
|
|
handleSelectClass:function (key) {
|
|
|
this.class_id=key;
|
|
|
this.getWarningList(this.keyword);
|
|
|
},
|
|
|
|
|
|
//日期选择
|
|
|
timeSelect:function (date, dateString) {
|
|
|
this.start_date=dateString[0];
|
|
|
this.end_date=dateString[1];
|
|
|
this.getWarningList(this.keyword);
|
|
|
|
|
|
},
|
|
|
//处理数据
|
|
|
dealData:function (data) {
|
|
|
let datas = [];
|
|
|
let _xaxis = [];
|
|
|
let xAxisData = []; //x轴数据
|
|
|
let yAxisData = []; //y轴数据
|
|
|
let groupIndex = []; //名称
|
|
|
for(let i = 0; i < data[0].list.length; i++){
|
|
|
_xaxis.push(data[0].list[i].xaxis);
|
|
|
}
|
|
|
data.forEach((item)=>{
|
|
|
let _count = []; //数值
|
|
|
for(let i = 0; i < item.list.length; i++){
|
|
|
_count.push(item.list[i].count);
|
|
|
}
|
|
|
xAxisData = _xaxis;
|
|
|
yAxisData.push( _count);
|
|
|
groupIndex.push(item.group_index);
|
|
|
});
|
|
|
datas = {
|
|
|
xAxisData: xAxisData,
|
|
|
yAxisData: yAxisData,
|
|
|
groupIndex: groupIndex
|
|
|
};
|
|
|
return datas;
|
|
|
},
|
|
|
//心理预警统计
|
|
|
getWarningDistribution:function (type) {
|
|
|
let params={
|
|
|
bureau_id:this.BaseConfig.person_info_my.bureau_id,
|
|
|
code:type
|
|
|
};
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
url:InterfaceConfig.getWarningDistribution.url,
|
|
|
params:params,
|
|
|
method:InterfaceConfig.getWarningDistribution.method,
|
|
|
isTestLogin:InterfaceConfig.getWarningDistribution.isTestLogin,
|
|
|
isOfficeInterface:false
|
|
|
}],(result)=>{
|
|
|
if(type==='gender'){
|
|
|
this.sexFlag=true;
|
|
|
if(result[0].data.list.length!==0){
|
|
|
let dom=this.dealData(result[0].data.list);
|
|
|
this.sexData.xAxisData=dom.xAxisData;
|
|
|
this.sexData.legendData=dom.groupIndex;
|
|
|
this.sexData.seriesData=[
|
|
|
{
|
|
|
name:dom.groupIndex[0],
|
|
|
type:'bar',
|
|
|
data:dom.yAxisData[0],
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
|
color:'#D43030'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name:dom.groupIndex[1],
|
|
|
type:'bar',
|
|
|
data:dom.yAxisData[1],
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
|
color:'#FF5733'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name:dom.groupIndex[2],
|
|
|
type:'bar',
|
|
|
data:dom.yAxisData[2],
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
|
color:'#FFEB3B'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
];
|
|
|
}else {
|
|
|
this.sexData.seriesData=[];
|
|
|
this.sexData.xAxisData=[];
|
|
|
this.sexData.legendData=[];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
}else {
|
|
|
this.gradeBarFlag=true;
|
|
|
if(result[0].data.list.length!==0){
|
|
|
let dom=this.dealData(result[0].data.list);
|
|
|
this.gradeData.xAxisData=dom.xAxisData;
|
|
|
this.gradeData.legendData=dom.groupIndex;
|
|
|
this.gradeData.seriesData=[
|
|
|
{
|
|
|
name:dom.groupIndex[0],
|
|
|
type:'bar',
|
|
|
data:dom.yAxisData[0],
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
|
color:'#D43030'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name:dom.groupIndex[1],
|
|
|
type:'bar',
|
|
|
data:dom.yAxisData[1],
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
|
color:'#FF5733'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name:dom.groupIndex[2],
|
|
|
type:'bar',
|
|
|
data:dom.yAxisData[2],
|
|
|
itemStyle:{
|
|
|
normal:{
|
|
|
color:'#FFEB3B'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
];
|
|
|
}else {
|
|
|
this.gradeData.seriesData=[];
|
|
|
this.gradeData.xAxisData=[];
|
|
|
this.gradeData.legendData=[];
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
})
|
|
|
},
|
|
|
//获取年级
|
|
|
getClassYear:function () {
|
|
|
let params={
|
|
|
org_id:this.BaseConfig.person_info_my.bureau_id,
|
|
|
stage:6
|
|
|
};
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
url:InterfaceConfig.getClassYear.url,
|
|
|
params:params,
|
|
|
method:InterfaceConfig.getClassYear.method,
|
|
|
isTestLogin:InterfaceConfig.getClassYear.isTestLogin,
|
|
|
isOfficeInterface:false
|
|
|
}],(result)=>{
|
|
|
if(result[0].data.success){
|
|
|
let data=result[0].data.table_List;
|
|
|
this.gradeFlag=true;
|
|
|
if(data.length!==0){
|
|
|
let _list= [{
|
|
|
ENTRANCE_YEAR_TEXT: "全部",
|
|
|
ENTRANCE_YEAR: ""
|
|
|
}];
|
|
|
data.forEach((item,) => {
|
|
|
item.columns.ENTRANCE_YEAR_TEXT = item.columns.ENTRANCE_YEAR + "级";
|
|
|
_list.push(item.columns);
|
|
|
});
|
|
|
this.classYearList=_list;
|
|
|
}else {
|
|
|
this.gradeList=[{
|
|
|
ENTRANCE_YEAR_TEXT: "全部",
|
|
|
ENTRANCE_YEAR: ""
|
|
|
}];
|
|
|
}
|
|
|
this.getClassList();
|
|
|
|
|
|
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
//获取班级
|
|
|
getClassList:function () {
|
|
|
this.classFlag=false;
|
|
|
let params={
|
|
|
org_id:this.BaseConfig.person_info_my.bureau_id,
|
|
|
bureau_id: this.BaseConfig.person_info_my.bureau_id,
|
|
|
entrance_year: this.year,
|
|
|
pageSize: 999,
|
|
|
pageNumber: 1,
|
|
|
stage_id: 6,
|
|
|
};
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
url:InterfaceConfig.getClassList.url,
|
|
|
params:params,
|
|
|
method:InterfaceConfig.getClassList.method,
|
|
|
isTestLogin:InterfaceConfig.getClassList.isTestLogin,
|
|
|
isOfficeInterface:false
|
|
|
}],(result)=>{
|
|
|
if(result[0].data.success){
|
|
|
this.classFlag=true;
|
|
|
let dom = [{
|
|
|
CLASS_ID: "",
|
|
|
CLASS_NAME: "全部"
|
|
|
}];
|
|
|
if(result[0].data.table_List.length!==0){
|
|
|
result[0].data.table_List.forEach((item) => {
|
|
|
dom.push({CLASS_NAME: item.CLASS_NAME, CLASS_ID: item.CLASS_ID});
|
|
|
});
|
|
|
}
|
|
|
this.class_id=dom[0].CLASS_ID;
|
|
|
this.classList=dom;
|
|
|
this.getWarningList(this.keyword);
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
//获取预警列表
|
|
|
getWarningList:function (keyword) {
|
|
|
let params={
|
|
|
bureau_id: this.BaseConfig.person_info_my.bureau_id,
|
|
|
start_date: this.start_date,
|
|
|
end_date: this.end_date,
|
|
|
grade_year: this.year,
|
|
|
page_size: this.page_size,
|
|
|
page_number:keyword!==""?1:this.page_number,
|
|
|
class_id: this.class_id,
|
|
|
sort_type:this.sort_type,//1是升序，2是降序
|
|
|
keyword :keyword,
|
|
|
status:''
|
|
|
};
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
url:InterfaceConfig.getWarningList.url,
|
|
|
params:params,
|
|
|
method:InterfaceConfig.getWarningList.method,
|
|
|
isTestLogin:InterfaceConfig.getWarningList.isTestLogin,
|
|
|
isOfficeInterface:false
|
|
|
}],(result)=>{
|
|
|
if(result[0].data.success){
|
|
|
this.tableFlag=true;
|
|
|
this.total_row=result[0].data.totalRow;
|
|
|
this.tableData=result[0].data.table_List;
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.PsychologicalWarningSmall{
|
|
|
/deep/ .ant-tabs-nav{
|
|
|
.ant-tabs-tab{
|
|
|
color: var(--moduleFontColor);
|
|
|
}
|
|
|
.ant-tabs-tab-active{
|
|
|
color: #31a8fa;
|
|
|
}
|
|
|
}
|
|
|
.condition{
|
|
|
margin-right: 1rem;
|
|
|
margin-bottom: 1rem;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.img-style{
|
|
|
width:18px;
|
|
|
height:18px;
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
.administrator{
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
.teacher{
|
|
|
.header{
|
|
|
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
