1286 lines
27 KiB
Vue
1286 lines
27 KiB
Vue
<template>
|
|
<div class="big-screen">
|
|
<header class="item item1">
|
|
<h1>云舒心理成长平台</h1>
|
|
<div class="showTime">{{ showTime }}</div>
|
|
</header>
|
|
|
|
<div class="main-box">
|
|
<div class="item-left">
|
|
<div class="item-left-1 boxall">
|
|
<div class="alltitle">量表使用</div>
|
|
<div class="boxnav">
|
|
<v-chart :option="leftBar1Option" autoresize />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-left-2 boxall">
|
|
<div class="alltitle">年级统计</div>
|
|
<div class="box-btn">
|
|
<el-radio-group v-model="leftBar2Radio" fill="#031D50" @change="leftBar2RadioChange">
|
|
<el-radio-button value="year">当年</el-radio-button>
|
|
<el-radio-button value="month">本月</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="boxnav">
|
|
<v-chart :option="leftBar2Option" autoresize />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-center">
|
|
<div class="item-center-1 boxall">
|
|
<div class="alltitle">数据统计</div>
|
|
<div class="no">
|
|
<div class="no-hd">
|
|
<ul>
|
|
<li>{{ userNum }}</li>
|
|
<li>{{ evaluationNum }}</li>
|
|
<li>{{ warnNum }}</li>
|
|
<li>{{ interveneNum }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="no-bd">
|
|
<ul>
|
|
<li>总用户数</li>
|
|
<li>总测评数</li>
|
|
<li>总预警数</li>
|
|
<li>总干预数</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-center-2 boxall">
|
|
<div class="alltitle">风险统计</div>
|
|
<div class="box-btn">
|
|
<el-radio-group v-model="centerBar1Radio" fill="#031D50" @change="centerBar1RadioChange">
|
|
<el-radio-button value="year">当年</el-radio-button>
|
|
<el-radio-button value="month">本月</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="boxnav">
|
|
<v-chart :option="centerBar1Option" autoresize />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-center-2 boxall">
|
|
<div class="alltitle">测评数统计</div>
|
|
<div class="boxnav">
|
|
<v-chart :option="centerLine2Option" autoresize />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-right">
|
|
<div class="item-right-2 boxall">
|
|
<div class="alltitle">最新测评数据</div>
|
|
<div class="boxnav">
|
|
<div class="item-th">
|
|
<span>场次名称</span>
|
|
<span>完成数量</span>
|
|
<span>时间</span>
|
|
</div>
|
|
<vue3-seamless-scroll :list="list" :hover="true" class="scroll" :singleWaitTime="5000">
|
|
<div class="item" v-for="(item, index) in list" :key="index">
|
|
<span>{{ item.sessionName }}</span>
|
|
<span>{{ item.value }} / {{ item.total }}</span>
|
|
<span>{{ parseTime(item.expireTime, '{y}-{m}-{d}') }}</span>
|
|
</div>
|
|
</vue3-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-right-1 boxall">
|
|
<div class="alltitle">预警干预统计</div>
|
|
<div class="boxnav">
|
|
<v-chart :option="rightBar1Option" autoresize />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-right-2 boxall">
|
|
<div class="alltitle">风险统计</div>
|
|
<div class="box-btn">
|
|
<el-radio-group v-model="rightPie2Radio" fill="#031D50" @change="rightPie2RadioChange">
|
|
<el-radio-button value="year">当年</el-radio-button>
|
|
<el-radio-button value="month">本月</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="boxnav">
|
|
<v-chart :option="rightPie2Option" autoresize />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
|
import '@/utils/flexible'
|
|
import * as echarts from 'echarts';
|
|
import { use } from 'echarts/core'
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
import { PieChart, BarChart } from "echarts/charts";
|
|
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
|
|
import VChart from 'vue-echarts'
|
|
|
|
import { getUserNum, getEvaluationNum, getWarnNum, getInterveneNum, getWarn4All, getPublishNum, getGrade, getConclusion, getMonthEvaluation, getPublish, getHalfMonth } from '@/api/index'
|
|
import { getWarnAll } from '@/api/activity/statistics';
|
|
|
|
use([
|
|
CanvasRenderer,
|
|
PieChart,
|
|
BarChart,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
GridComponent
|
|
]);
|
|
|
|
let showTime = ref('')
|
|
let timer: any = null
|
|
|
|
function time() {
|
|
let dt = new Date();
|
|
let y = dt.getFullYear();
|
|
let mt = dt.getMonth() + 1;
|
|
let day = dt.getDate();
|
|
let h = dt.getHours();//获取时
|
|
let m = dt.getMinutes();//获取分
|
|
let s = dt.getSeconds();//获取秒
|
|
showTime.value = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
|
|
}
|
|
|
|
const list = ref([])
|
|
async function getPublishData() {
|
|
const res = await getPublish()
|
|
list.value = res.data
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
|
|
|
|
const leftBar1Radio = ref(1)
|
|
const leftBar1Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
top: '1%',
|
|
right: '7%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
show: false,
|
|
}],
|
|
yAxis: [{
|
|
axisTick: 'none',
|
|
axisLine: 'none',
|
|
offset: '7',
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
formatter: function (value: any) {
|
|
if (value.length > 8) {
|
|
return `${value.slice(0, 8)}...`
|
|
}
|
|
return value
|
|
}
|
|
},
|
|
data: []
|
|
}],
|
|
series: [{
|
|
name: '量表使用统计',
|
|
type: 'bar',
|
|
yAxisIndex: 0,
|
|
data: [],
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
}
|
|
},
|
|
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
|
|
}]
|
|
});
|
|
|
|
async function getPublishNumData() {
|
|
const res = await getPublishNum({ limitNum: 10 })
|
|
let yAxisData: any[] = []
|
|
let data: any[] = []
|
|
|
|
res.data.sort((a: any, b: any) => { return a.value - b.value })
|
|
|
|
res.data.forEach((v: any) => {
|
|
yAxisData.push(v.name)
|
|
data.push(v.value)
|
|
});
|
|
|
|
leftBar1Option.value.yAxis[0].data = yAxisData
|
|
leftBar1Option.value.series[0].data = data
|
|
}
|
|
|
|
const leftBar2Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['发布数', '测评数'],
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
// itemGap: 35
|
|
},
|
|
grid: {
|
|
left: '0',
|
|
right: '20',
|
|
bottom: '0',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
//rotate:-90,
|
|
formatter: function (value: any) { return value.split("").join("\n"); },
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitNumber: 4,
|
|
axisTick: { show: false },
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},
|
|
axisLine: { show: false },
|
|
},
|
|
|
|
series: []
|
|
})
|
|
|
|
const leftBar2Radio = ref('year')
|
|
async function getGradeData() {
|
|
const res = await getGrade({ select: leftBar2Radio.value })
|
|
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' }]
|
|
leftBar2Option.value.xAxis.data = xAxisData
|
|
leftBar2Option.value.series = seriesData
|
|
}
|
|
|
|
const centerBar1Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
right: "40",
|
|
bottom: "30",
|
|
left: "40",
|
|
},
|
|
legend: {
|
|
data: [],
|
|
right: 'center',
|
|
width: '100%',
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: [],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
"type": "value",
|
|
"name": "",
|
|
axisTick: { show: false },
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
|
|
},
|
|
axisLine: {
|
|
min: 0,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},//左线色
|
|
|
|
},
|
|
{
|
|
"type": "value",
|
|
"name": "",
|
|
"show": true,
|
|
"axisLabel": {
|
|
"show": true,
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
axisTick: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},//右线色
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},//x轴线
|
|
},
|
|
],
|
|
"series": [
|
|
{
|
|
"name": "未见异常",
|
|
"type": "bar",
|
|
"data": [],
|
|
"barWidth": "15%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#8bd46e'
|
|
}, {
|
|
offset: 1,
|
|
color: '#09bcb7'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0.2"
|
|
},
|
|
{
|
|
"name": "低风险",
|
|
"type": "bar",
|
|
"data": [],
|
|
"barWidth": "15%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#248ff7'
|
|
}, {
|
|
offset: 1,
|
|
color: '#6851f1'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0.2"
|
|
},
|
|
{
|
|
"name": "中风险",
|
|
"type": "bar",
|
|
"data": [],
|
|
"barWidth": "15%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#fccb05'
|
|
}, {
|
|
offset: 1,
|
|
color: '#f5804d'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0.2"
|
|
},
|
|
{
|
|
"name": "高风险",
|
|
"type": "line",
|
|
smooth: true,
|
|
"yAxisIndex": 1,
|
|
"data": [],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2
|
|
},
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#86d370",
|
|
|
|
}
|
|
},
|
|
|
|
}
|
|
,
|
|
{
|
|
"name": "重大风险",
|
|
"type": "line",
|
|
"yAxisIndex": 1,
|
|
|
|
"data": [],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2
|
|
},
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#3496f8",
|
|
|
|
}
|
|
},
|
|
"smooth": true
|
|
}
|
|
]
|
|
})
|
|
|
|
const centerBar1Radio = ref('year')
|
|
async function getConclusionData() {
|
|
const res = await getConclusion({ select: centerBar1Radio.value })
|
|
let noneNum: any[] = []
|
|
let lowNum: any[] = []
|
|
let middleNum: any[] = []
|
|
let highNum: any[] = []
|
|
let majorNum: any[] = []
|
|
let xAxisData: any[] = []
|
|
|
|
res.data.forEach(v => {
|
|
xAxisData.push(v.name)
|
|
|
|
noneNum.push(v.noneNum)
|
|
lowNum.push(v.lowNum)
|
|
middleNum.push(v.middleNum)
|
|
highNum.push(v.highNum)
|
|
majorNum.push(v.majorNum)
|
|
})
|
|
|
|
let categoryData = ['未见异常', '低风险', '中风险', '高风险', '重大风险']
|
|
|
|
centerBar1Option.value.legend.data = categoryData
|
|
centerBar1Option.value.xAxis[0].data = xAxisData
|
|
centerBar1Option.value.series[0].data = noneNum
|
|
centerBar1Option.value.series[1].data = lowNum
|
|
centerBar1Option.value.series[2].data = middleNum
|
|
centerBar1Option.value.series[3].data = highNum
|
|
centerBar1Option.value.series[4].data = majorNum
|
|
}
|
|
|
|
const centerLine2Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
// formatter:'{c}' ,
|
|
},
|
|
grid: {
|
|
left: '0',
|
|
top: '30',
|
|
right: '20',
|
|
bottom: '20',
|
|
containLabel: true
|
|
},
|
|
// legend: {
|
|
// data: ['字段1', '字段2'],
|
|
// right: 'center',
|
|
// top: 0,
|
|
// textStyle: {
|
|
// color: "#fff"
|
|
// },
|
|
// itemWidth: 12,
|
|
// itemHeight: 10,
|
|
// // itemGap: 35
|
|
// },
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
|
|
},
|
|
|
|
data: []
|
|
|
|
}, {
|
|
axisPointer: { show: false },
|
|
axisLine: { show: false },
|
|
position: 'bottom',
|
|
offset: 20,
|
|
}],
|
|
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisTick: { show: false },
|
|
// splitNumber: 6,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
name: '时间',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
showSymbol: false,
|
|
lineStyle: {
|
|
normal: {
|
|
color: 'rgba(228, 228, 126, 1)',
|
|
width: 2
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(228, 228, 126, .2)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(228, 228, 126, 0)'
|
|
}], false),
|
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(228, 228, 126, 1)',
|
|
borderColor: 'rgba(228, 228, 126, .1)',
|
|
borderWidth: 12
|
|
}
|
|
},
|
|
data: []
|
|
|
|
}
|
|
]
|
|
})
|
|
|
|
async function getMonthEvaluationData() {
|
|
const res = await getMonthEvaluation()
|
|
|
|
let xAxisData = []
|
|
let seriesData = []
|
|
res.data.forEach(v => {
|
|
xAxisData.push(v.name)
|
|
seriesData.push(v.value)
|
|
});
|
|
|
|
centerLine2Option.value.xAxis[0].data = xAxisData
|
|
centerLine2Option.value.series[0].data = seriesData
|
|
}
|
|
|
|
const rightBar1Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
}, "grid": {
|
|
"top": "15%",
|
|
"right": "6%",
|
|
"bottom": "30",
|
|
"left": "6%",
|
|
},
|
|
legend: {
|
|
data: ['预警数', '干预数'],
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
},
|
|
"xAxis": [
|
|
{
|
|
"type": "category",
|
|
data: [],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
},
|
|
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
"type": "value",
|
|
"name": "",
|
|
splitLine: { show: false },
|
|
axisTick: { show: false },
|
|
"axisLabel": {
|
|
"show": true,
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},//左线色
|
|
|
|
},
|
|
{
|
|
"type": "value",
|
|
"name": "",
|
|
"show": true,
|
|
axisTick: { show: false },
|
|
"axisLabel": {
|
|
"show": true,
|
|
formatter: "{value}",
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},//右线色
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
}
|
|
},//x轴线
|
|
},
|
|
],
|
|
"series": [
|
|
{
|
|
"name": "预警数",
|
|
"type": "bar",
|
|
"data": [],
|
|
"barWidth": "20%",
|
|
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#fccb05'
|
|
}, {
|
|
offset: 1,
|
|
color: '#f5804d'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0"
|
|
},
|
|
{
|
|
"name": "干预数",
|
|
"type": "line",
|
|
"yAxisIndex": 1,
|
|
|
|
"data": [],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2
|
|
},
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#ff3300",
|
|
|
|
}
|
|
},
|
|
"smooth": true
|
|
}
|
|
]
|
|
})
|
|
|
|
async function getHalfMonthData() {
|
|
const res = await getHalfMonth()
|
|
let xAxisData = []
|
|
let warnData = []
|
|
let interveneData = []
|
|
|
|
res.data.forEach(v => {
|
|
xAxisData.push(v.name)
|
|
warnData.push(v.spareValue)
|
|
interveneData.push(v.value)
|
|
});
|
|
|
|
rightBar1Option.value.xAxis[0].data = xAxisData
|
|
|
|
rightBar1Option.value.series[0].data = warnData
|
|
rightBar1Option.value.series[1].data = interveneData
|
|
}
|
|
|
|
const rightPie2Option = ref({
|
|
title: {
|
|
text: '',
|
|
subtext: '',
|
|
x: 'center',
|
|
y: '50%',
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
lineHeight: 10,
|
|
},
|
|
subtextStyle: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
lineHeight: 10,
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{b} : {c} ({d}%)"
|
|
},
|
|
|
|
visualMap: {
|
|
show: false,
|
|
min: 500,
|
|
max: 600,
|
|
inRange: {
|
|
//colorLightness: [0, 1]
|
|
}
|
|
},
|
|
series: [{
|
|
name: '风险统计',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
center: ['50%', '50%'],
|
|
color: ['#AED88F', '#91ACE0', '#FED961', '#FC7100', '#FF0000'], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
data: [],
|
|
roseType: 'radius',
|
|
label: {
|
|
normal: {
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|
rich: {
|
|
c: {
|
|
color: 'rgb(241,246,104)',
|
|
fontSize: '0.2rem',
|
|
lineHeight: 5
|
|
},
|
|
b: {
|
|
color: 'rgba(255,255,255,.7)',
|
|
fontSize: '0.2rem',
|
|
height: 44
|
|
},
|
|
},
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: 'rgb(98,137,169)',
|
|
fontSize: '0.2rem',
|
|
},
|
|
smooth: 0.2,
|
|
length: 10,
|
|
length2: 20,
|
|
|
|
}
|
|
}
|
|
}]
|
|
})
|
|
|
|
const rightPie2Radio = ref('year')
|
|
async function getWarn4AllData() {
|
|
const res = await getWarn4All({ select: rightPie2Radio.value })
|
|
|
|
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 }
|
|
]
|
|
|
|
rightPie2Option.value.series[0].data = data
|
|
}
|
|
|
|
function leftBar2RadioChange() {
|
|
getGradeData()
|
|
}
|
|
|
|
function centerBar1RadioChange() {
|
|
getConclusionData()
|
|
}
|
|
|
|
function rightPie2RadioChange() {
|
|
getWarn4AllData()
|
|
}
|
|
|
|
onMounted(() => {
|
|
time()
|
|
|
|
timer = setInterval(time, 1000);
|
|
|
|
getUserNumData()
|
|
getEvaluationNumData()
|
|
getWarnNumData()
|
|
getInterveneNumData()
|
|
|
|
getGradeData()
|
|
getWarn4AllData()
|
|
getConclusionData()
|
|
|
|
getPublishNumData()
|
|
getMonthEvaluationData()
|
|
getPublishData()
|
|
getHalfMonthData()
|
|
});
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
/* 声明字体*/
|
|
@font-face {
|
|
font-family: electronicFont;
|
|
src: url('@/assets/font/DS-DIGIT.TTF');
|
|
}
|
|
|
|
.big-screen {
|
|
background: url('@/assets/images/bg.jpg') no-repeat top center;
|
|
background-size: cover;
|
|
line-height: 1.15;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
:deep(.el-radio-button .el-radio-button__inner) {
|
|
background-color: #043E94;
|
|
border-color: #043E94;
|
|
color: #fff;
|
|
font-size: .2rem;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
height: 1.25rem;
|
|
background: url('@/assets/images/head_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
h1 {
|
|
font-size: .475rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.showTime {
|
|
position: absolute;
|
|
right: .375rem;
|
|
top: 0;
|
|
line-height: .9375rem;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: .25rem;
|
|
letter-spacing: .025rem;
|
|
font-family: electronicFont;
|
|
}
|
|
}
|
|
|
|
.main-box {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.5fr 1fr;
|
|
grid-template-rows: calc(100vh - 1.25rem);
|
|
|
|
.item-left,
|
|
.item-center,
|
|
.item-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center
|
|
}
|
|
|
|
.item-left-1 {
|
|
flex: 0 1 58%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-left-2 {
|
|
flex: 0 1 40%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-center-1 {
|
|
flex: 0 1 18%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-center-2 {
|
|
flex: 0 1 40%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-center-3 {
|
|
flex: 0 1 40%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-right-1 {
|
|
flex: 0 1 32%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-right-2 {
|
|
flex: 0 1 33%;
|
|
width: 99%;
|
|
}
|
|
|
|
.item-right-3 {
|
|
flex: 0 1 33%;
|
|
width: 99%;
|
|
}
|
|
|
|
.boxall {
|
|
padding: 0.1rem;
|
|
background: rgba(6, 48, 109, .5);
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.alltitle {
|
|
font-size: .225rem;
|
|
color: #fff;
|
|
line-height: .5rem;
|
|
position: relative;
|
|
padding-left: .15rem
|
|
}
|
|
|
|
.alltitle:before {
|
|
position: absolute;
|
|
height: .2rem;
|
|
width: 4px;
|
|
background: #49bcf7;
|
|
border-radius: 5px;
|
|
content: "";
|
|
left: 0;
|
|
top: 50%;
|
|
margin-top: -.1rem;
|
|
}
|
|
|
|
.box-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 4%;
|
|
margin-top: -.1rem;
|
|
}
|
|
|
|
.boxnav {
|
|
height: calc(100% - .5rem);
|
|
}
|
|
|
|
.no {
|
|
background-color: rgba(101, 132, 226, 0.1);
|
|
padding: .0625rem;
|
|
margin-left: .125rem;
|
|
margin-right: .125rem;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
content: "";
|
|
width: 30px;
|
|
height: 20px;
|
|
border-top: 2px solid #02a6b5;
|
|
border-left: 2px solid #02a6b5;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
content: "";
|
|
width: 30px;
|
|
height: 20px;
|
|
border-right: 2px solid #02a6b5;
|
|
border-bottom: 2px solid #02a6b5;
|
|
}
|
|
|
|
.no-hd {
|
|
height: .75rem;
|
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
|
|
|
ul {
|
|
display: flex;
|
|
|
|
li {
|
|
position: relative;
|
|
flex: 1;
|
|
line-height: .75rem;
|
|
font-size: .75rem;
|
|
color: #ffeb7b;
|
|
text-align: center;
|
|
font-family: 'electronicFont';
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 25%;
|
|
right: 0;
|
|
height: 50%;
|
|
width: 1px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-bd {
|
|
height: .3125rem;
|
|
|
|
ul {
|
|
display: flex;
|
|
|
|
li {
|
|
flex: 1;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: .2rem;
|
|
line-height: .3125rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
table th {
|
|
font-size: .225rem;
|
|
background: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
table td {
|
|
font-size: 0.2125rem;
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
table th,
|
|
table td {
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
|
padding: .1rem 0;
|
|
}
|
|
|
|
.item-th {
|
|
border: 1px solid rgba(255, 255, 255, .1);
|
|
padding: .1rem 0;
|
|
font-size: .2rem;
|
|
color: rgba(255, 255, 255, .6);
|
|
background: rgba(0, 0, 0, .1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
span:nth-child(1) {
|
|
flex: 0 1 60%;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
flex: 0 1 20%;
|
|
}
|
|
|
|
span:nth-child(3) {
|
|
flex: 0 1 20%;
|
|
}
|
|
}
|
|
|
|
.scroll {
|
|
height: 2.375rem;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
padding: .1rem 0;
|
|
font-size: .2rem;
|
|
color: rgba(255, 255, 255, .6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
span:nth-child(1) {
|
|
flex: 0 1 60%;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
flex: 0 1 20%;
|
|
}
|
|
|
|
span:nth-child(3) {
|
|
flex: 0 1 20%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|