diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue index 9123e8d..36920a7 100644 --- a/src/views/bigScreen/index.vue +++ b/src/views/bigScreen/index.vue @@ -8,14 +8,14 @@
-
标题名称
+
量表使用统计
-
标题名称
+
年级统计
@@ -28,18 +28,18 @@
    -
  • 50
  • -
  • 164
  • -
  • 87
  • -
  • 1
  • +
  • {{ userNum }}
  • +
  • {{ evaluationNum }}
  • +
  • {{ warnNum }}
  • +
  • {{ interveneNum }}
    -
  • 总人数
  • -
  • 总采集人数
  • -
  • 预警人数
  • -
  • 干预人数
  • +
  • 总用户数
  • +
  • 总测评数
  • +
  • 总预警数
  • +
  • 总干预数
@@ -132,7 +132,7 @@
-
标题名称
+
预警统计
@@ -154,6 +154,8 @@ 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 } from '@/api/index' + use([ CanvasRenderer, PieChart, @@ -217,10 +219,43 @@ const list = ref([ }, ]); +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(() => { time() timer = setInterval(time, 1000); + + getUserNumData() + getEvaluationNumData() + getWarnNumData() + getInterveneNumData() + + getPublishNumData() + getGradeData() + getWarn4AllData() }); @@ -232,7 +267,7 @@ const leftBar1Option = ref({ grid: { left: '2%', top: '1%', - right: '5%', + right: '7%', bottom: '0%', containLabel: true }, @@ -249,45 +284,17 @@ const leftBar1Option = ref({ fontSize: '14', } }, - data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9'] - - }, { - axisTick: 'none', - axisLine: 'none', - axisLabel: { - textStyle: { - color: 'rgba(255,255,255,.6)', - fontSize: '14', - } - }, - data: [1514, 1619, 1623, 1968, 2158, 2456, 3506, 4664, 8390] - - }, { - name: '单位:件', - nameGap: '50', - nameTextStyle: { - color: 'rgba(255,255,255,.6)', - fontSize: '16', - }, - axisLine: { - lineStyle: { - color: 'rgba(0,0,0,0)' - } - }, - data: [], + data: [] }], series: [{ - name: '条', + name: '量表使用统计', type: 'bar', yAxisIndex: 0, - data: [25, 30, 34, 40, 43, 48, 52, 56, 70], + data: [], label: { normal: { show: true, position: 'right', - formatter: function (param) { - return param.value + '%'; - }, textStyle: { color: 'rgba(255,255,255,.8)', fontSize: '12', @@ -310,23 +317,22 @@ const leftBar1Option = ref({ } }, 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 }] }); +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) + }); + + leftBar1Option.value.yAxis[0].data = yAxisData + leftBar1Option.value.series[0].data = data +} + const leftBar2Option = ref({ tooltip: { trigger: 'axis', @@ -335,7 +341,7 @@ const leftBar2Option = ref({ } }, legend: { - data: ['字段1', '字段2', '字段3'], + data: ['发布数', '测评数'], right: 'center', top: 0, textStyle: { @@ -354,7 +360,7 @@ const leftBar2Option = ref({ }, xAxis: { type: 'category', - data: ['字段1', '字段2', '字段3', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9'], + data: [], axisLine: { lineStyle: { color: 'white' @@ -393,47 +399,25 @@ const leftBar2Option = 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' }] + leftBar2Option.value.xAxis.data = xAxisData + leftBar2Option.value.series = seriesData +} const centerBar1Option = ref({ tooltip: { @@ -881,10 +865,10 @@ const rightBar1Option = ref({ const rightPie2Option = ref({ title: { - text: '5132', - subtext: '总体', + text: '', + subtext: '', x: 'center', - y: '40%', + y: '50%', textStyle: { color: '#fff', fontSize: 22, @@ -911,29 +895,16 @@ const rightPie2Option = ref({ } }, series: [{ - name: '访问来源', + name: '预警统计', type: 'pie', 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: 'rgb(241,246,104)', @@ -962,6 +933,20 @@ const rightPie2Option = 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 } + ] + + rightPie2Option.value.series[0].data = data +}