257 lines
7.3 KiB
Vue
257 lines
7.3 KiB
Vue
<template>
|
|
<div class="statistical-analysis">
|
|
<!-- 左侧树形菜单 -->
|
|
<div class="left-menu">
|
|
<!-- 这个部分用的是组件-后期替换 -->
|
|
<MOSTY.DepartmentTree width="310px" @change="init" placeholder="管理部门" clearable filterable :isBmId="true" v-model="listQuery.ssbmdm" />
|
|
</div>
|
|
|
|
<!-- 右侧内容区 -->
|
|
<div class="right-content">
|
|
<!-- 顶部筛选 -->
|
|
<div class="filter-section">
|
|
<el-radio-group v-model="radio" @change="changeRadio">
|
|
<el-radio v-for="(it,idx) in timeList" :key="idx" :label="it.num" >{{ it.label }}</el-radio>
|
|
</el-radio-group>
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
@change="handleDateChange"
|
|
/>
|
|
<el-button type="primary" @click="init">查询</el-button>
|
|
<el-button type="primary" @click="handleRest">重置</el-button>
|
|
</div>
|
|
|
|
<!-- 统计图表区域 -->
|
|
<div class="charts-container">
|
|
<div class="chart-item">
|
|
<div class="chart-title">
|
|
<span>线索类型</span>
|
|
<el-button type="primary">导出统计表</el-button>
|
|
</div>
|
|
<div class="chart">
|
|
<PieEcharts echartsId="bsqkEpieChart" :key="ketcount" color="#333" :data="obj.xslxList"></PieEcharts>
|
|
</div>
|
|
</div>
|
|
<div class="chart-item">
|
|
<div class="chart-title">
|
|
<span>采纳情况</span>
|
|
<el-button type="primary">导出统计表</el-button>
|
|
</div>
|
|
<div class="chart">
|
|
<DbarEcharts echartsId="bar3DChart" :key="ketcount" :data="obj.cnList"></DbarEcharts>
|
|
</div>
|
|
</div>
|
|
<div class="chart-item">
|
|
<div class="chart-title">
|
|
<span>处置状态</span>
|
|
<el-button type="primary">导出统计表</el-button>
|
|
</div>
|
|
<ul class="chart mt8">
|
|
<li v-for="(it, idx) in obj.czztList" :key="idx" class="mb6">
|
|
<div style="color: #333">{{ it.label }}</div>
|
|
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" >
|
|
<span><span style="color: #e37233">{{ it.value }}</span> 个</span >
|
|
</el-progress>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="chart-item">
|
|
<div class="chart-title">
|
|
<span>奖惩情况</span>
|
|
<el-button type="primary">导出统计表</el-button>
|
|
</div>
|
|
<lineEcharts color="#333" :key="ketcount" echartsId="areaChart" :data="obj.jcqkList"></lineEcharts>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { timeValidate, timeSlotChange } from "@/utils/tools.js";
|
|
import * as MOSTY from "@/components/MyComponents/index";
|
|
import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
|
|
import PieEcharts from "@/views/home/echarts/pieEcharts.vue";
|
|
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
|
|
import { qcckPost } from "@/api/qcckApi.js";
|
|
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
|
const ketcount = ref(0);
|
|
const radio = ref(0);
|
|
const timeList = ref([
|
|
{ label: "日", num: 0 },
|
|
{ label: "月", num: 1 },
|
|
{ label: "季", num: 2 },
|
|
{ label: "年", num: 3 }
|
|
]);
|
|
const dateRange = ref([timeValidate(),timeValidate()]);// 日期范围
|
|
const listQuery = ref({})
|
|
const obj = reactive({
|
|
xslxList: [],
|
|
jcqkList: [],
|
|
czztList: [],
|
|
cnList: {
|
|
list: [],
|
|
topColor:'#1bd6c2',
|
|
colors: ["#28EEBF","#0DBAC5"],
|
|
}
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
init() //初始化数据
|
|
});
|
|
|
|
const init = async () => {
|
|
|
|
let data = {
|
|
ssbmdm: listQuery.value.ssbmdm,
|
|
kssj: dateRange.value[0] + ' 00:00:00',
|
|
jssj: dateRange.value[1] + ' 23:59:59',
|
|
cjLx: 1 // 1-临安吗
|
|
};
|
|
// 获取线索类型统计
|
|
let res = await qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByXslx')
|
|
let arr = res || [];
|
|
obj.xslxList = arr.map(v=>{
|
|
return { label:v.zdmc,value:v.count }
|
|
})
|
|
|
|
// 获取奖惩情况统计
|
|
let res1 = await qcckPost(data, '/mosty-gsxt/tbJlqk/getShygkhtj');
|
|
let arr1 = res1 || [];
|
|
obj.jcqkList = arr1.map(v=>{
|
|
return { label:v.zdmc,value:v.count }
|
|
})
|
|
|
|
// 获取处置状态统计
|
|
let res2 = await qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByCzzt');
|
|
let arr2 = res2 || [];
|
|
obj.czztList = arr2.map(v=>{
|
|
return { label:v.zdmc,value:v.count }
|
|
})
|
|
|
|
// 获取采纳情况统计
|
|
let res3 = await qcckPost(data, '/mosty-gsxt/qbcj/getXscjTjByShzt');
|
|
let arr3 = res3 || [];
|
|
obj.cnList.list = arr3.map(v=>{
|
|
return { label:v.zdmc,value:v.count }
|
|
})
|
|
|
|
ketcount.value++;
|
|
}
|
|
|
|
const changeRadio = (val) =>{
|
|
switch(val){
|
|
case 0: //日
|
|
dateRange.value = [timeValidate(),timeValidate()]
|
|
break;
|
|
case 1: //月
|
|
dateRange.value = timeSlotChange('本月')
|
|
break;
|
|
case 2: //季度
|
|
dateRange.value = timeSlotChange('本季度')
|
|
break;
|
|
case 3: //年
|
|
dateRange.value = timeSlotChange('本年')
|
|
break;
|
|
}
|
|
}
|
|
|
|
const handleDateChange = (val) => {
|
|
radio.value = '';
|
|
if(val[0] == timeSlotChange('天')[0] && val[1] == timeSlotChange('天')[1]) radio.value = 0;
|
|
if(val[0] == timeSlotChange('本月')[0] && val[1] == timeSlotChange('本月')[1]) radio.value = 1;
|
|
if(val[0] == timeSlotChange('本季度')[0] && val[1] == timeSlotChange('本季度')[1]) radio.value = 2;
|
|
if(val[0] == timeSlotChange('本年')[0] && val[1] == timeSlotChange('本年')[1]) radio.value = 3;
|
|
};
|
|
|
|
// 重置
|
|
const handleRest = () => {
|
|
radio.value = 0;
|
|
dateRange.value = [timeValidate(),timeValidate()];
|
|
init();
|
|
};
|
|
;
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.statistical-analysis {
|
|
display: flex;
|
|
height: 100%;
|
|
|
|
.left-menu {
|
|
width: 350px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
border-right: 1px solid #e8e8e8;
|
|
}
|
|
|
|
.right-content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
.filter-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
background: #fff;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.charts-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
height: calc(100% - 50px);
|
|
.chart-item {
|
|
width: 49.5%;
|
|
height: calc(50% - 5px);
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
.chart-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.chart {
|
|
height: calc(100% - 40px);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-radio {
|
|
color: #333;
|
|
}
|
|
::v-deep .el-radio__inner {
|
|
border-radius: 4px;
|
|
}
|
|
::v-deep .el-progress-bar__innerText {
|
|
color: #333;
|
|
margin: 0 -40px;
|
|
}
|
|
::v-deep .el-progress.is-exception .el-progress-bar__inner {
|
|
background: linear-gradient(90deg, #fe5d00 0%, #face35 100%);
|
|
}
|
|
}
|
|
</style>
|