首页接口对接

src/api/activity/statistics/index.ts

@@ -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
   });

src/api/index.ts

@@ -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
+  });
+};

src/views/bigScreen/index.vue

@@ -38,8 +38,8 @@
               <ul>
                 <li>总人数</li>
                 <li>总采集人数</li>
-                <li>关注人次</li>
+                <li>预警人数</li>
-                <li>干预人次</li>
+                <li>干预人数</li>
               </ul>
             </div>
           </div>

src/views/index.vue

@@ -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>
+          <span class="font-num">{{ userNum }}</span>
-            <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>
         </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>
+          <span class="font-num">{{ evaluationNum }}</span>
-            <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>
         </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>
+          <span class="font-num">{{ warnNum }}</span>
-            <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>
         </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>
+          <span class="font-num">{{ interveneNum }}</span>
-            <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>
         </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: [{
+    data: [],
-      "value": 1924,
-      "name": "字段名称1"
-    }, {
-      "value": 1055,
-      "name": "字段名称2"
-    }, {
-      "value": 1532,
-      "name": "字段名称3"
-    }
-    ].sort(function (a, b) {
-      return a.value - b.value
-    }),
     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: [{
+  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]
-  }
   ]
 })
 
+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: '量表使用次数',
+    text: '量表使用统计',
-    x: 'center',
+    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%',
+    left: '3%',
-    top: '5%',
+    right: '4%',
-    right: '5%',
+    bottom: '3%',
-    bottom: '0%',
     containLabel: true
   },
-  xAxis: [{
+  xAxis: {
-    show: false,
+    type: 'value',
-  }],
+    boundaryGap: [0, 0.01]
-  yAxis: [{
-    axisTick: 'none',
-    axisLine: 'none',
-    offset: '7',
-    axisLabel: {
-      textStyle: {
-        color: '#95989D',
-        fontSize: '14',
-      }
   },
-    data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']
+  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() {
-    name: '单位：件',
+  const res = await getPublishNum()
-    nameGap: '50',
+  let yAxisData: any[] = []
-    nameTextStyle: {
+  let data: any[] = []
-      color: 'rgba(255,255,255,.6)',
+  res.data.forEach((v: any) => {
-      fontSize: '16',
+    yAxisData.push(v.name)
-    },
+    data.push(v.value)
-    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 {