首页大屏接口对接

src/views/bigScreen/index.vue

@@ -8,14 +8,14 @@
     <div class="main-box">
       <div class="item-left">
         <div class="item-left-1 boxall">
-          <div class="alltitle">标题名称</div>
+          <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="alltitle">年级统计</div>
           <div class="boxnav">
             <v-chart :option="leftBar2Option" autoresize />
           </div>
@@ -28,18 +28,18 @@
           <div class="no">
             <div class="no-hd">
               <ul>
-                <li>50</li>
+                <li>{{ userNum }}</li>
-                <li>164</li>
+                <li>{{ evaluationNum }}</li>
-                <li>87</li>
+                <li>{{ warnNum }}</li>
-                <li>1</li>
+                <li>{{ interveneNum }}</li>
               </ul>
             </div>
             <div class="no-bd">
               <ul>
-                <li>总人数</li>
+                <li>总用户数</li>
-                <li>总采集人数</li>
+                <li>总测评数</li>
-                <li>预警人数</li>
+                <li>总预警数</li>
-                <li>干预人数</li>
+                <li>总干预数</li>
               </ul>
             </div>
           </div>
@@ -132,7 +132,7 @@
         </div>
 
         <div class="item-right-2 boxall">
-          <div class="alltitle">标题名称</div>
+          <div class="alltitle">预警统计</div>
           <div class="boxnav">
             <v-chart :option="rightPie2Option" autoresize />
           </div>
@@ -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']
+    data: []
-
-  }, {
-    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: [],
   }],
   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: [{
+  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' }]
+  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',
+    text: '',
-    subtext: '总体',
+    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: [{
+    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: '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
+}
 </script>
 
 <style lang="scss" scoped>
@@ -1160,7 +1145,7 @@ li {
       }
 
       .no-bd {
-        height: .25rem;
+        height: .3125rem;
 
         ul {
           display: flex;
@@ -1170,7 +1155,7 @@ li {
             text-align: center;
             color: rgba(255, 255, 255, 0.7);
             font-size: .2rem;
-            line-height: .25rem;
+            line-height: .3125rem;
           }
         }
       }

src/views/index.vue

@@ -21,80 +21,76 @@
 
     <div class="item">
       <el-card style="height: 200px;">
-        <template #header>
-          <div class="card-header">
-            <span>总用户数</span>
-          </div>
-        </template>
-
         <div class="card-content">
           <div>
-            <el-icon color="#FA6A6C" :size="80">
+            <el-icon color="#33CABB" :size="70">
               <Avatar />
             </el-icon>
           </div>
 
-          <div class="font-num">{{ userNum }}</div>
+          <div>
+            <ul>
+              <li class="font-txt">总用户数</li>
+              <li class="font-num">{{ userNum }}</li>
+            </ul>
+          </div>
         </div>
       </el-card>
     </div>
 
     <div class="item">
       <el-card style="height: 200px;">
-        <template #header>
-          <div class="card-header">
-            <span>总测评数</span>
-          </div>
-        </template>
-
         <div class="card-content">
           <div>
-            <el-icon color="#FD8E66" :size="80">
+            <el-icon color="#15C377" :size="70">
               <EditPen />
             </el-icon>
           </div>
 
-          <div class="font-num">{{ evaluationNum }}</div>
+          <div>
+            <ul>
+              <li class="font-txt">总测评数</li>
+              <li class="font-num">{{ evaluationNum }}</li>
+            </ul>
+          </div>
         </div>
       </el-card>
     </div>
 
     <div class="item">
       <el-card style="height: 200px;">
-        <template #header>
-          <div class="card-header">
-            <span>总预警数</span>
-          </div>
-        </template>
-
         <div class="card-content">
           <div>
-            <el-icon color="#FF9C57" :size="80">
+            <el-icon color="#F96868" :size="70">
-              <View />
+              <WarnTriangleFilled />
             </el-icon>
           </div>
 
-          <div class="font-num">{{ warnNum }}</div>
+          <div>
+            <ul>
+              <li class="font-txt">总预警数</li>
+              <li class="font-num">{{ warnNum }}</li>
+            </ul>
+          </div>
         </div>
       </el-card>
     </div>
 
     <div class="item">
       <el-card style="height: 200px;">
-        <template #header>
-          <div class="card-header">
-            <span>总干预数</span>
-          </div>
-        </template>
-
         <div class="card-content">
           <div>
-            <el-icon color="#F15BB5" :size="80">
+            <el-icon color="#926DDE" :size="70">
               <Collection />
             </el-icon>
           </div>
 
-          <div class="font-num">{{ interveneNum }}</div>
+          <div>
+            <ul>
+              <li class="font-txt">总干预数</li>
+              <li class="font-num">{{ interveneNum }}</li>
+            </ul>
+          </div>
         </div>
       </el-card>
     </div>
@@ -190,7 +186,7 @@ const leftPieOption = ref({
     }
   },
   series: [{
-    name: '访问来源',
+    name: '预警统计',
     type: 'pie',
     radius: ['50%', '70%'],
     center: ['50%', '50%'],
@@ -350,6 +346,7 @@ const rightBarOption = ref({
       lineHeight: 10,
     }
   },
+  color: ['#99E4DC'],
   tooltip: {
     trigger: 'axis',
     axisPointer: {
@@ -440,9 +437,15 @@ onMounted(() => {
   src: url('@/assets/font/DS-DIGIT.TTF');
 }
 
+.font-txt {
+  color: #95989D;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
 .font-num {
-  font-size: 80px;
+  font-size: 70px;
-  color: #FE5050;
+  color: #FF9C57;
   text-align: center;
   font-family: 'electronicFont';
 }
@@ -505,7 +508,7 @@ onMounted(() => {
 
     .card-content {
       display: flex;
-      justify-content: space-around;
+      justify-content: space-between;
       align-items: center;
     }
 

src/views/scale/SysScaleList/index.vue

@@ -151,8 +151,17 @@
     </el-dialog>
 
     <el-dialog title="查看量表试卷详情" v-model="detailVisible" width="800px" append-to-body>
-      <p style="font-size: 18px; font-weight: bold;" v-for="item in questionList" :key="item.questionId">
+      <el-card v-for="item in factorList" style="margin-bottom: 10px;">
-        {{ item.questionOrder + "、" + item.questionContent }}</p>
+        <template #header>
+          <div class="card-header">
+            <span>{{ item.factorName }}</span>
+          </div>
+        </template>
+
+        <p v-for="q in item.questionList" :key="q.questionId">
+          {{ q.questionOrder + "、" + q.questionContent }}
+        </p>
+      </el-card>
     </el-dialog>
 
   </div>
@@ -311,11 +320,10 @@ watch(() => dialog.visible, (visible) => {
   }
 })
 
-const questionList = ref<any[]>([])
+const factorList = ref<any[]>([])
 async function handleDetail(row: any) {
-  console.log('handleDetail', row.scaleId);
   const res = await findByScaleId({ scaleId: row.scaleId })
-  questionList.value = res.data
+  factorList.value = res.data
   detailVisible.value = true
 }