首页接口对接
This commit is contained in:
parent
5408277cd8
commit
0794192d32
|
|
@ -4,7 +4,7 @@ import { AxiosPromise } from 'axios';
|
|||
|
||||
export const getCompleteAll = (query: any): AxiosPromise<any[]> => {
|
||||
return request({
|
||||
url: '/scale/statistic/complete/all',
|
||||
url: '/statistic/complete/grade',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
|
|
@ -13,7 +13,7 @@ export const getCompleteAll = (query: any): AxiosPromise<any[]> => {
|
|||
|
||||
export const getCompleteClass = (query: any): AxiosPromise<any[]> => {
|
||||
return request({
|
||||
url: '/scale/statistic/complete/class',
|
||||
url: '/statistic/complete/class',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
|
|
@ -21,7 +21,7 @@ export const getCompleteClass = (query: any): AxiosPromise<any[]> => {
|
|||
|
||||
export const getWarnAll = (query: any): AxiosPromise<any[]> => {
|
||||
return request({
|
||||
url: '/scale/statistic/warn/all',
|
||||
url: '/statistic/warn/grade',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
|
|
@ -30,7 +30,7 @@ export const getWarnAll = (query: any): AxiosPromise<any[]> => {
|
|||
|
||||
export const getWarnClass = (query: any): AxiosPromise<any[]> => {
|
||||
return request({
|
||||
url: '/scale/statistic/warn/class',
|
||||
url: '/statistic/warn/class',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
|
|
@ -38,7 +38,7 @@ export const getWarnClass = (query: any): AxiosPromise<any[]> => {
|
|||
|
||||
export const getFactorAll = (query: any): AxiosPromise<any[]> => {
|
||||
return request({
|
||||
url: '/scale/statistic/factor/all',
|
||||
url: '/statistic/factor/grade',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
|
|
@ -47,7 +47,7 @@ export const getFactorAll = (query: any): AxiosPromise<any[]> => {
|
|||
|
||||
export const getFactorClass = (query: any): AxiosPromise<any[]> => {
|
||||
return request({
|
||||
url: '/scale/statistic/factor/class',
|
||||
url: '/statistic/factor/class',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
|
||||
export const getUserNum = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/user/num',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getEvaluationNum = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/evaluation/num',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getWarnNum = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/warn/num',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getInterveneNum = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/intervene/num',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getWarn4All = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/warn/all',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getGrade = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/grade/publish-evaluation',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
||||
export const getPublishNum = (query?: any): AxiosPromise<any> => {
|
||||
return request({
|
||||
url: '/statistic/scale/publish/num',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
};
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
<ul>
|
||||
<li>总人数</li>
|
||||
<li>总采集人数</li>
|
||||
<li>关注人次</li>
|
||||
<li>干预人次</li>
|
||||
<li>预警人数</li>
|
||||
<li>干预人数</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,28 +24,11 @@
|
|||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>总用户数</span>
|
||||
<!-- <el-tag type="success">日</el-tag> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="card-content">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="card-item-1">
|
||||
<span>2000</span>
|
||||
|
||||
<el-icon color="#FA6B6D" size="40px">
|
||||
<Avatar />
|
||||
</el-icon>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card-item-2">
|
||||
<span>总用户数</span>
|
||||
<span>2000</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="font-num">{{ userNum }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -55,28 +38,11 @@
|
|||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>总测评数</span>
|
||||
<!-- <el-tag type="success">日</el-tag> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="card-content">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="card-item-1">
|
||||
<span>2000</span>
|
||||
|
||||
<el-icon color="#FA6B6D" size="40px">
|
||||
<Avatar />
|
||||
</el-icon>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card-item-2">
|
||||
<span>总测评数</span>
|
||||
<span>2000</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="font-num">{{ evaluationNum }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -86,28 +52,11 @@
|
|||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>总预警数</span>
|
||||
<!-- <el-tag type="success">日</el-tag> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="card-content">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="card-item-1">
|
||||
<span>2000</span>
|
||||
|
||||
<el-icon color="#FA6B6D" size="40px">
|
||||
<Avatar />
|
||||
</el-icon>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card-item-2">
|
||||
<span>总预警数</span>
|
||||
<span>2000</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="font-num">{{ warnNum }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -117,28 +66,11 @@
|
|||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>总干预数</span>
|
||||
<!-- <el-tag type="success">日</el-tag> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="card-content">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="card-item-1">
|
||||
<span>2000</span>
|
||||
|
||||
<el-icon color="#FA6B6D" size="40px">
|
||||
<Avatar />
|
||||
</el-icon>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card-item-2">
|
||||
<span>总干预数</span>
|
||||
<span>2000</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="font-num">{{ interveneNum }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -158,11 +90,13 @@
|
|||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
import { getUserNum, getEvaluationNum, getWarnNum, getInterveneNum, getWarn4All, getPublishNum, getGrade } from '@/api/index'
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { PieChart, BarChart, LineChart } from "echarts/charts";
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent } from "echarts/components";
|
||||
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent, VisualMapComponent } from "echarts/components";
|
||||
import VChart from 'vue-echarts'
|
||||
|
||||
import useUserStore from '@/store/modules/user';
|
||||
|
|
@ -177,7 +111,8 @@ use([
|
|||
TooltipComponent,
|
||||
LegendComponent,
|
||||
ToolboxComponent,
|
||||
GridComponent
|
||||
GridComponent,
|
||||
VisualMapComponent
|
||||
]);
|
||||
|
||||
function getGreeting() {
|
||||
|
|
@ -236,24 +171,11 @@ const leftPieOption = ref({
|
|||
radius: ['50%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
||||
data: [{
|
||||
"value": 1924,
|
||||
"name": "字段名称1"
|
||||
}, {
|
||||
"value": 1055,
|
||||
"name": "字段名称2"
|
||||
}, {
|
||||
"value": 1532,
|
||||
"name": "字段名称3"
|
||||
}
|
||||
].sort(function (a, b) {
|
||||
return a.value - b.value
|
||||
}),
|
||||
data: [],
|
||||
roseType: 'radius',
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
|
||||
formatter: ['{c|{c}人}', '{b|{b}}'].join('\n'),
|
||||
rich: {
|
||||
c: {
|
||||
color: '#95989D',
|
||||
|
|
@ -283,6 +205,20 @@ const leftPieOption = ref({
|
|||
}]
|
||||
})
|
||||
|
||||
async function getWarn4AllData() {
|
||||
const res = await getWarn4All()
|
||||
|
||||
const data = [
|
||||
{ name: '未见异常', value: res.data.noneNum },
|
||||
{ name: '低风险', value: res.data.lowNum },
|
||||
{ name: '中风险', value: res.data.middleNum },
|
||||
{ name: '高风险', value: res.data.highNum },
|
||||
{ name: '重大风险', value: res.data.majorNum }
|
||||
]
|
||||
|
||||
leftPieOption.value.series[0].data = data
|
||||
}
|
||||
|
||||
const centerBarOption = ref({
|
||||
title: {
|
||||
text: '年级统计',
|
||||
|
|
@ -301,7 +237,7 @@ const centerBarOption = ref({
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['字段1', '字段2', '字段3'],
|
||||
data: ['发布数', '测评数'],
|
||||
right: 'center',
|
||||
top: 0,
|
||||
textStyle: {
|
||||
|
|
@ -320,7 +256,7 @@ const centerBarOption = ref({
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['字段1', '字段2', '字段3', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9'],
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#95989D'
|
||||
|
|
@ -358,51 +294,31 @@ const centerBarOption = ref({
|
|||
axisLine: { show: false },
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: '字段1',
|
||||
type: 'bar',
|
||||
stack: 'a',
|
||||
barWidth: '30', barGap: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#8bd46e',
|
||||
}
|
||||
},
|
||||
data: [331, 497, 440, 81, 163, 366, 57, 188, 172, 2295]
|
||||
},
|
||||
{
|
||||
name: '字段2',
|
||||
type: 'bar',
|
||||
stack: 'a',
|
||||
barWidth: '30', barGap: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f5804d',
|
||||
barBorderRadius: 0,
|
||||
}
|
||||
},
|
||||
data: [48, -97, 56, -59, 90, 98, 64, 61, -8, 253]
|
||||
},
|
||||
{
|
||||
name: '字段3',
|
||||
type: 'bar',
|
||||
stack: 'a',
|
||||
barWidth: '30', barGap: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#248ff7',
|
||||
barBorderRadius: 0,
|
||||
}
|
||||
},
|
||||
data: [-13, -21, -112, 5, 0, -5, 72, -3, 8, -69]
|
||||
}
|
||||
series: [
|
||||
]
|
||||
})
|
||||
|
||||
async function getGradeData() {
|
||||
const res = await getGrade()
|
||||
let xAxisData: any[] = []
|
||||
let seriesPublishData: any[] = []
|
||||
let seriesEvaluationData: any[] = []
|
||||
|
||||
res.data.forEach((v: any) => {
|
||||
xAxisData.push(v.name)
|
||||
seriesPublishData.push(v.value)
|
||||
seriesEvaluationData.push(v.spareValue)
|
||||
});
|
||||
|
||||
const seriesData = [{ name: '发布数', data: seriesPublishData, type: 'bar' }, { name: '测评数', data: seriesEvaluationData, type: 'bar' }]
|
||||
centerBarOption.value.xAxis.data = xAxisData
|
||||
centerBarOption.value.series = seriesData
|
||||
}
|
||||
|
||||
const rightBarOption = ref({
|
||||
title: {
|
||||
text: '量表使用次数',
|
||||
x: 'center',
|
||||
text: '量表使用统计',
|
||||
x: 'right',
|
||||
y: '1%',
|
||||
textStyle: {
|
||||
color: '#95989D',
|
||||
|
|
@ -410,104 +326,79 @@ const rightBarOption = ref({
|
|||
lineHeight: 10,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
top: '5%',
|
||||
right: '5%',
|
||||
bottom: '0%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
}],
|
||||
yAxis: [{
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
offset: '7',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#95989D',
|
||||
fontSize: '14',
|
||||
}
|
||||
},
|
||||
data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
},
|
||||
series: [
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
}, {
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#95989D',
|
||||
fontSize: '14',
|
||||
}
|
||||
},
|
||||
data: [1514, 1619, 1623, 1968, 2158, 2456, 3506, 4664, 8390]
|
||||
async function getPublishNumData() {
|
||||
const res = await getPublishNum()
|
||||
let yAxisData: any[] = []
|
||||
let data: any[] = []
|
||||
res.data.forEach((v: any) => {
|
||||
yAxisData.push(v.name)
|
||||
data.push(v.value)
|
||||
});
|
||||
|
||||
}, {
|
||||
name: '单位：件',
|
||||
nameGap: '50',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255,255,255,.6)',
|
||||
fontSize: '16',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
}],
|
||||
series: [{
|
||||
name: '条',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: function (param: any) {
|
||||
return param.value + '%';
|
||||
},
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.8)',
|
||||
fontSize: '12',
|
||||
}
|
||||
}
|
||||
},
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#03c893'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0091ff'
|
||||
}
|
||||
]),
|
||||
barBorderRadius: 15,
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}, {
|
||||
name: '白框',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
barGap: '-100%',
|
||||
data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,.2)',
|
||||
barBorderRadius: 15,
|
||||
}
|
||||
},
|
||||
z: 1
|
||||
}]
|
||||
});
|
||||
const seriesData = [{ name: '量表使用次数', data: data, type: 'bar' }]
|
||||
rightBarOption.value.yAxis.data = yAxisData
|
||||
rightBarOption.value.series = seriesData
|
||||
}
|
||||
|
||||
const userNum = ref(0)
|
||||
async function getUserNumData() {
|
||||
const res = await getUserNum()
|
||||
userNum.value = res.data
|
||||
}
|
||||
|
||||
const evaluationNum = ref(0)
|
||||
async function getEvaluationNumData() {
|
||||
const res = await getEvaluationNum()
|
||||
evaluationNum.value = res.data
|
||||
}
|
||||
|
||||
const warnNum = ref(0)
|
||||
async function getWarnNumData() {
|
||||
const res = await getWarnNum()
|
||||
warnNum.value = res.data
|
||||
}
|
||||
|
||||
const interveneNum = ref(0)
|
||||
async function getInterveneNumData() {
|
||||
const res = await getInterveneNum()
|
||||
interveneNum.value = res.data
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUserNumData()
|
||||
getEvaluationNumData()
|
||||
getWarnNumData()
|
||||
getInterveneNumData()
|
||||
getPublishNumData()
|
||||
|
||||
getWarn4AllData()
|
||||
getGradeData()
|
||||
})
|
||||
|
||||
|
||||
// import { initWebSocket } from '@/utils/websocket';
|
||||
|
|
@ -519,20 +410,32 @@ const rightBarOption = ref({
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 声明字体*/
|
||||
@font-face {
|
||||
font-family: electronicFont;
|
||||
src: url('@/assets/font/DS-DIGIT.TTF');
|
||||
}
|
||||
|
||||
.font-num {
|
||||
font-size: 80px;
|
||||
color: #FE5050;
|
||||
text-align: center;
|
||||
font-family: 'electronicFont';
|
||||
}
|
||||
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 85px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 150px 200px 1fr;
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
background-color: #F3F3F3;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
grid-column: 1 / 5;
|
||||
|
||||
|
|
@ -570,8 +473,16 @@ const rightBarOption = ref({
|
|||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #95989D;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-item-1 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue