大屏图表和表格样式修改

src/api/index.ts

@@ -55,4 +55,36 @@ export const getPublishNum = (query?: any): AxiosPromise<any> => {
     method: 'get',
     params: query
   });
+};
+
+export const getConclusion = (query?: any): AxiosPromise<any> => {
+  return request({
+    url: '/statistic/grade/conclusion',
+    method: 'get',
+    params: query
+  });
+};
+
+export const getMonthEvaluation = (query?: any): AxiosPromise<any> => {
+  return request({
+    url: '/statistic/month/evaluation',
+    method: 'get',
+    params: query
+  });
+};
+
+export const getPublish = (query?: any): AxiosPromise<any> => {
+  return request({
+    url: '/statistic/publish',
+    method: 'get',
+    params: query
+  });
+};
+
+export const getHalfMonth = (query?: any): AxiosPromise<any> => {
+  return request({
+    url: '/statistic/month/intervene-warn',
+    method: 'get',
+    params: query
+  });
 };

src/views/bigScreen/index.vue

@@ -46,14 +46,14 @@
         </div>
 
         <div class="item-center-2 boxall">
-          <div class="alltitle">标题名称</div>
+          <div class="alltitle">风险统计</div>
           <div class="boxnav">
             <v-chart :option="centerBar1Option" autoresize />
           </div>
         </div>
 
         <div class="item-center-2 boxall">
-          <div class="alltitle">标题名称</div>
+          <div class="alltitle">近12月测评数统计</div>
           <div class="boxnav">
             <v-chart :option="centerLine2Option" autoresize />
           </div>
@@ -62,18 +62,18 @@
 
       <div class="item-right">
         <div class="item-right-2 boxall">
-          <div class="alltitle">标题名称</div>
+          <div class="alltitle">最新测评数据</div>
           <div class="boxnav">
             <div class="item-th">
-              <span>字段1</span>
+              <span>场次名称</span>
-              <span>字段2</span>
+              <span>完成数量</span>
-              <span>字段3</span>
+              <span>时间</span>
             </div>
             <vue3-seamless-scroll :list="list" class="scroll">
               <div class="item" v-for="(item, index) in list" :key="index">
-                <span>{{ item.title }}</span>
+                <span>{{ item.sessionName }}</span>
-                <span>{{ item.date }}</span>
+                <span>{{ item.value }} / {{ item.total }}</span>
-                <span>{{ item.date }}</span>
+                <span>{{ item.expireTime }}</span>
               </div>
             </vue3-seamless-scroll>
             <!-- <table border="0" cellspacing="0">
@@ -125,7 +125,7 @@
         </div>
 
         <div class="item-right-1 boxall">
-          <div class="alltitle">标题名称</div>
+          <div class="alltitle">预警干预统计</div>
           <div class="boxnav">
             <v-chart :option="rightBar1Option" autoresize />
           </div>
@@ -154,7 +154,7 @@ 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'
+import { getUserNum, getEvaluationNum, getWarnNum, getInterveneNum, getWarn4All, getPublishNum, getGrade, getConclusion, getMonthEvaluation, getPublish, getHalfMonth } from '@/api/index'
 
 use([
   CanvasRenderer,
@@ -180,44 +180,11 @@ function time() {
   showTime.value = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
 }
 
-const list = ref([
+const list = ref([])
-  {
+async function getPublishData() {
-    title: "展示数据第1条",
+  const res = await getPublish()
-    date: Date.now(),
+  list.value = res.data
-  },
+}
-  {
-    title: "展示数据第2条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第3条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第4条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第5条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第6条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第7条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第8条",
-    date: Date.now(),
-  },
-  {
-    title: "展示数据第9条",
-    date: Date.now(),
-  },
-]);
 
 const userNum = ref(0)
 async function getUserNumData() {
@@ -256,6 +223,10 @@ onMounted(() => {
   getPublishNumData()
   getGradeData()
   getWarn4AllData()
+  getConclusionData()
+  getMonthEvaluationData()
+  getPublishData()
+  getHalfMonthData()
 });
 
 
@@ -423,36 +394,37 @@ const centerBar1Option = ref({
   tooltip: {
     trigger: 'axis',
     axisPointer: { type: 'shadow' },
-  }, "grid": {
+  },
-    "top": "20%",
+  grid: {
-    "right": "50",
+    top: "20%",
-    "bottom": "20",
+    right: "50",
-    "left": "30",
+    bottom: "20",
+    left: "30",
   },
   legend: {
-    data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6'],
+    data: [],
-    right: 'center', width: '100%',
+    right: 'center',
+    width: '100%',
     textStyle: {
       color: "#fff"
     },
     itemWidth: 12,
     itemHeight: 10,
   },
-  "xAxis": [
+  xAxis: [
     {
-      "type": "category",
+      type: "category",
-      data: ['2016', '2017', '2018', '2019'],
+      data: [],
       axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
       axisLabel: {
         textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
       },
-
     },
   ],
   "yAxis": [
     {
       "type": "value",
-      "name": "单位万",
+      "name": "",
       axisTick: { show: false },
       splitLine: {
         show: false,
@@ -466,19 +438,17 @@ const centerBar1Option = ref({
       },
       axisLine: {
         min: 0,
-        max: 10,
         lineStyle: { color: 'rgba(255,255,255,.1)' }
       },//左线色
 
     },
     {
       "type": "value",
-      "name": "增速",
+      "name": "",
       "show": true,
       "axisLabel": {
         "show": true,
         fontSize: 14,
-        formatter: "{value} %",
         color: "rgba(255,255,255,.6)"
       },
       axisTick: { show: false },
@@ -488,9 +458,9 @@ const centerBar1Option = ref({
   ],
   "series": [
     {
-      "name": "字段1",
+      "name": "未见异常",
       "type": "bar",
-      "data": [36.6, 38.80, 40.84, 41.60],
+      "data": [],
       "barWidth": "15%",
       "itemStyle": {
         "normal": {
@@ -507,9 +477,9 @@ const centerBar1Option = ref({
       "barGap": "0.2"
     },
     {
-      "name": "字段2",
+      "name": "低风险",
       "type": "bar",
-      "data": [14.8, 14.1, 15, 16.30],
+      "data": [],
       "barWidth": "15%",
       "itemStyle": {
         "normal": {
@@ -526,9 +496,9 @@ const centerBar1Option = ref({
       "barGap": "0.2"
     },
     {
-      "name": "字段3",
+      "name": "中风险",
       "type": "bar",
-      "data": [9.2, 9.1, 9.85, 8.9],
+      "data": [],
       "barWidth": "15%",
       "itemStyle": {
         "normal": {
@@ -545,11 +515,11 @@ const centerBar1Option = ref({
       "barGap": "0.2"
     },
     {
-      "name": "字段4",
+      "name": "高风险",
       "type": "line",
       smooth: true,
       "yAxisIndex": 1,
-      "data": [0, 6.01, 5.26, 1.48],
+      "data": [],
       lineStyle: {
         normal: {
           width: 2
@@ -565,11 +535,11 @@ const centerBar1Option = ref({
     }
     ,
     {
-      "name": "字段5",
+      "name": "重大风险",
       "type": "line",
       "yAxisIndex": 1,
 
-      "data": [0, -4.73, 6.38, 8.67],
+      "data": [],
       lineStyle: {
         normal: {
           width: 2
@@ -582,29 +552,40 @@ const centerBar1Option = ref({
         }
       },
       "smooth": true
-    },
-    {
-      "name": "字段6",
-      "type": "line",
-      "yAxisIndex": 1,
-
-      "data": [0, -1.09, 8.24, -9.64],
-      lineStyle: {
-        normal: {
-          width: 2
-        },
-      },
-      "itemStyle": {
-        "normal": {
-          "color": "#fbc30d",
-
-        }
-      },
-      "smooth": true
     }
   ]
 })
 
+async function getConclusionData() {
+  const res = await getConclusion()
+  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',
@@ -615,20 +596,20 @@ const centerLine2Option = ref({
     left: '0',
     top: '30',
     right: '10',
-    bottom: '-20',
+    bottom: '20',
     containLabel: true
   },
-  legend: {
+  // legend: {
-    data: ['字段1', '字段2'],
+  //   data: ['字段1', '字段2'],
-    right: 'center',
+  //   right: 'center',
-    top: 0,
+  //   top: 0,
-    textStyle: {
+  //   textStyle: {
-      color: "#fff"
+  //     color: "#fff"
-    },
+  //   },
-    itemWidth: 12,
+  //   itemWidth: 12,
-    itemHeight: 10,
+  //   itemHeight: 10,
-    // itemGap: 35
+  //   // itemGap: 35
-  },
+  // },
 
   xAxis: [{
     type: 'category',
@@ -648,17 +629,13 @@ const centerLine2Option = ref({
 
     },
 
-    data: ['17年3月', '17年6月', '17年9月', '17年12月', '18年3月', '18年6月', '18年9月', '18年12月', '19年3月', '19年6月', '19年9月', '19年12月']
+    data: []
 
   }, {
-
     axisPointer: { show: false },
     axisLine: { show: false },
     position: 'bottom',
     offset: 20,
-
-
-
   }],
 
   yAxis: [{
@@ -671,7 +648,7 @@ const centerLine2Option = ref({
       }
     },
     axisLabel: {
-      formatter: "{value} %",
+      formatter: "{value}",
       textStyle: {
         color: "rgba(255,255,255,.6)",
         fontSize: 14,
@@ -686,7 +663,7 @@ const centerLine2Option = ref({
   }],
   series: [
     {
-      name: '字段1',
+      name: '时间',
       type: 'line',
       smooth: true,
       symbol: 'circle',
@@ -717,46 +694,26 @@ const centerLine2Option = ref({
           borderWidth: 12
         }
       },
-      data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10]
+      data: []
 
-    }, {
+    }
-      name: '字段2',
-      type: 'line',
-      smooth: true,
-      symbol: 'circle',
-      symbolSize: 5,
-      showSymbol: false,
-      lineStyle: {
-
-        normal: {
-          color: 'rgba(255, 128, 128, 1)',
-          width: 2
-        }
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: 'rgba(255, 128, 128,.2)'
-          }, {
-            offset: 1,
-            color: 'rgba(255, 128, 128, 0)'
-          }], false),
-          shadowColor: 'rgba(0, 0, 0, 0.1)',
-        }
-      },
-      itemStyle: {
-        normal: {
-          color: 'rgba(255, 128, 128, 1)',
-          borderColor: 'rgba(255, 128, 128, .1)',
-          borderWidth: 12
-        }
-      },
-      data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
-    },
   ]
 })
 
+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',
@@ -768,7 +725,7 @@ const rightBar1Option = ref({
     "left": "10%",
   },
   legend: {
-    data: ['字段1', '字段2'],
+    data: ['预警数', '干预数'],
     right: 'center',
     top: 0,
     textStyle: {
@@ -781,7 +738,7 @@ const rightBar1Option = ref({
     {
       "type": "category",
 
-      data: ['2016', '2017', '2018', '2019'],
+      data: [],
       axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
       axisLabel: {
         textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
@@ -792,7 +749,7 @@ const rightBar1Option = ref({
   "yAxis": [
     {
       "type": "value",
-      "name": "单位1",
+      "name": "",
       splitLine: { show: false },
       axisTick: { show: false },
       "axisLabel": {
@@ -805,12 +762,12 @@ const rightBar1Option = ref({
     },
     {
       "type": "value",
-      "name": "单位2",
+      "name": "",
       "show": true,
       axisTick: { show: false },
       "axisLabel": {
         "show": true,
-        formatter: "{value} %",
+        formatter: "{value}",
         color: "rgba(255,255,255,.6)"
       },
       axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
@@ -818,13 +775,10 @@ const rightBar1Option = ref({
     },
   ],
   "series": [
-
     {
-      "name": "字段1",
+      "name": "预警数",
       "type": "bar",
-      "data": [
+      "data": [],
-        18453.35, 20572.22, 24274.22, 30500.00
-      ],
       "barWidth": "20%",
 
       "itemStyle": {
@@ -842,11 +796,11 @@ const rightBar1Option = ref({
       "barGap": "0"
     },
     {
-      "name": "字段2",
+      "name": "干预数",
       "type": "line",
       "yAxisIndex": 1,
 
-      "data": [0, 11.48, 18.00, 25.65],
+      "data": [],
       lineStyle: {
         normal: {
           width: 2
@@ -863,6 +817,24 @@ const rightBar1Option = ref({
   ]
 })
 
+async function getHalfMonthData() {
+  const res = await getHalfMonth()
+  let xAxisData = []
+  let warnData = []
+  let interveneData = []
+
+  res.data.forEach(v => {
+    xAxisData.push(v.name)
+    warnData.push(v.value)
+    interveneData.push(v.spareValue)
+  });
+
+  rightBar1Option.value.xAxis[0].data = xAxisData
+
+  rightBar1Option.value.series[0].data = warnData
+  rightBar1Option.value.series[1].data = interveneData
+}
+
 const rightPie2Option = ref({
   title: {
     text: '',
@@ -1194,8 +1166,16 @@ li {
       align-items: center;
       justify-content: space-around;
 
-      span {
+      span:nth-child(1) {
-        flex: 0 1 33.33%;
+        flex: 0 1 50%;
+      }
+
+      span:nth-child(2) {
+        flex: 0 1 20%;
+      }
+
+      span:nth-child(3) {
+        flex: 0 1 30%;
       }
     }
 
@@ -1214,8 +1194,16 @@ li {
       align-items: center;
       justify-content: space-around;
 
-      span {
+      span:nth-child(1) {
-        flex: 0 1 33.33%;
+        flex: 0 1 50%;
+      }
+
+      span:nth-child(2) {
+        flex: 0 1 20%;
+      }
+
+      span:nth-child(3) {
+        flex: 0 1 30%;
       }
     }
   }