首页，大屏

ruoyi-ui/src/api/szxc/sjdp.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+// 标签分布
+export function bigDataTag() {
+  return request({
+    url: '/szxc/data/tag',
+    method: 'get'
+  })
+}
+
+// 年龄分布
+export function bigDataAge() {
+  return request({
+    url: '/szxc/data/age',
+    method: 'get'
+  })
+}
+
+// 性别分布
+export function bigDataSex() {
+  return request({
+    url: '/szxc/data/sex',
+    method: 'get'
+  })
+}
+
+// 活动分布
+export function bigDataActive() {
+  return request({
+    url: '/szxc/data/active',
+    method: 'get'
+  })
+}
+
+// 心愿分布
+export function bigDataWish() {
+  return request({
+    url: '/szxc/data/wish',
+    method: 'get'
+  })
+}
+

ruoyi-ui/src/router/index.js

@@ -74,6 +74,11 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/sjdp',
+    component: () => import('@/views/szxc/sjdp/index'),
+    hidden: true
+  },
   {
     path: '/user',
     component: Layout,

ruoyi-ui/src/views/szxc/sjdp/index.vue

@@ -0,0 +1,456 @@
+<template>
+  <div class="container">
+    <div class="head">
+      <div class="center">数据大屏</div>
+    </div>
+    <div class="content">
+      <div class="analysis" id="analysis1"></div>
+      <div class="analysis" id="analysis2"></div>
+      <div class="analysis" id="analysis3"></div>
+      <div class="analysis" id="analysis4"></div>
+      <div class="analysis" id="analysis5"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { bigDataTag, bigDataAge, bigDataSex, bigDataActive, bigDataWish } from "@/api/szxc/sjdp";
+import * as echarts from 'echarts';
+
+let barChart1 = null;
+let barChart2 = null;
+let barChart3 = null;
+let barChart4 = null;
+let barChart5 = null;
+
+function resizeFun() {
+  barChart1.resize();
+  barChart2.resize();
+  barChart3.resize();
+  barChart4.resize();
+  barChart5.resize();
+}
+
+export default {
+  name: "Index",
+  data() {
+    return {
+      age: {
+        legend: [],
+        xAxis: [],
+        series: []
+      },
+      sex: {
+        xAxis: [],
+        series: []
+      },
+      tag: {
+        legend: [],
+        xAxis: [],
+        series: []
+      },
+      active: {
+        legend: [],
+        xAxis: [],
+        series: []
+      },
+      wish: {
+        legend: [],
+        xAxis: [],
+        series: []
+      }
+    };
+  },
+  created() {
+    this.getBigDataAge()
+    this.getBigDataSex()
+    this.getBigDataTag()
+    this.getBigDataActive()
+    this.getBigDataWish()
+  },
+  beforeDestroy() {
+    if (!barChart1) {
+      return
+    }
+    barChart1.dispose()
+    barChart2.dispose()
+    barChart3.dispose()
+    barChart4.dispose()
+    barChart5.dispose()
+
+    barChart1 = null
+    barChart2 = null
+    barChart3 = null
+    barChart4 = null
+    barChart5 = null
+
+    window.removeEventListener("resize", resizeFun);
+  },
+  methods: {
+    // 年龄
+    getBigDataAge() {
+      bigDataAge().then(response => {
+        this.age.legend = []
+        this.age.xAxis = ['0-12岁','13-17岁','18-22岁','23-30岁','31-59岁','60岁以上']
+        this.age.series = []
+
+        response.forEach(item => {
+          this.age.legend.push(item.dept_name);
+          let arr = [];
+
+          this.age.xAxis.forEach(item1=>{
+            arr.push(item[item1])
+          })
+
+          this.age.series.push(
+            {
+              name: item.dept_name,
+              type:'line',
+              data: arr
+            }
+          )
+        })
+        this.initChart();
+      });
+    },
+    // 性别
+    getBigDataSex() {
+      bigDataSex().then(response => {
+        this.sex.xAxis = []
+        this.sex.series = []
+
+        let arr1 = [];
+        let arr2 = [];
+        let arr3 = [];
+        response.forEach(item => {
+          this.sex.xAxis.push(item.dept_name);
+          arr1.push(item.headCount)
+          arr2.push(item.man)
+          arr3.push(item.women)
+        })
+
+        this.sex.series = [{
+          name: '总数',
+          type: 'bar',
+          data: arr1
+        },
+          {
+            name: '男',
+            type: 'bar',
+            data: arr2
+          },
+          {
+            name: '女',
+            type: 'bar',
+            data: arr3
+          }]
+
+        this.initChart()
+      });
+    },
+    // 标签
+    getBigDataTag() {
+      bigDataTag().then(response => {
+        this.tag.legend = []
+        this.tag.xAxis = []
+        this.tag.series = []
+
+        if(response && response[0]){
+          this.tag.xAxis = Object.keys(response[0]).filter(item1 => item1 !== "dept_name")
+        }
+
+        response.forEach(item => {
+          this.tag.legend.push(item.dept_name);
+          let arr = [];
+
+          this.tag.xAxis.forEach(item1=>{
+            arr.push(item[item1])
+          })
+
+          this.tag.series.push(
+            {
+              name: item.dept_name,
+              type:'bar',
+              data: arr
+            }
+          )
+        })
+        this.initChart()
+      });
+    },
+    // 活动
+    getBigDataActive() {
+      bigDataActive().then(response => {
+        this.active.xAxis = []
+        this.active.series = []
+
+        let arr1 = [];
+        let arr2 = [];
+        let arr3 = [];
+        let arr4 = [];
+        response.forEach(item => {
+          this.active.xAxis.push(item.dept_name);
+          arr1.push(item.num)
+          arr2.push(item['待开始'])
+          arr3.push(item['进行中'])
+          arr3.push(item['已结束'])
+        })
+
+        this.active.series = [{
+          name: '总数',
+          type: 'bar',
+          data: arr1
+        },
+          {
+            name: '待开始',
+            type: 'bar',
+            data: arr2
+          },
+          {
+            name: '进行中',
+            type: 'bar',
+            data: arr3
+          },
+          {
+            name: '已结束',
+            type: 'bar',
+            data: arr4
+          }
+        ]
+
+        this.initChart()
+      });
+    },
+    // 心愿
+    getBigDataWish() {
+      bigDataWish().then(response => {
+        this.wish.legend = []
+        this.wish.xAxis = []
+        this.wish.series = []
+
+        if(response && response[0]){
+          this.wish.xAxis = Object.keys(response[0]).filter(item1 => item1 !== "dept_name")
+        }
+
+        response.forEach(item => {
+          this.wish.legend.push(item.dept_name);
+          let arr = [];
+
+          this.wish.xAxis.forEach(item1=>{
+            arr.push(item[item1])
+          })
+
+          this.wish.series.push(
+            {
+              name: item.dept_name,
+              type:'bar',
+              data: arr
+            }
+          )
+        })
+        this.initChart()
+      });
+    },
+    initChart() {
+      const _this = this;
+
+      barChart1 = echarts.init(document.getElementById('analysis1'));
+      barChart1.setOption({
+        title: {
+          text: '年龄分布'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: _this.age.legend
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.age.xAxis
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: _this.age.series
+      });
+
+      barChart2 = echarts.init(document.getElementById('analysis2'));
+      barChart2.setOption({
+        title: {
+          text: '性别分布'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data:["总数","男","女"]
+        },
+        xAxis: {
+          data: this.sex.xAxis
+        },
+        yAxis: {},
+        series: this.sex.series
+      });
+
+      barChart3 = echarts.init(document.getElementById('analysis3'));
+      barChart3.setOption({
+        title: {
+          text: '标签分布'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: _this.tag.legend
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.tag.xAxis
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: _this.tag.series
+      });
+
+      barChart4 = echarts.init(document.getElementById('analysis4'));
+      barChart4.setOption({
+        title: {
+          text: '活动分布'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['总数', '待开始', '进行中', '已结束']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.active.xAxis
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: _this.active.series
+      });
+
+      barChart5 = echarts.init(document.getElementById('analysis5'));
+      barChart5.setOption({
+        title: {
+          text: '心愿分布'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: _this.wish.legend
+        },
+        grid: {
+          left: '5%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: _this.wish.xAxis
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: _this.wish.series
+      });
+
+      window.addEventListener("resize", resizeFun)
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  width: 100vw;
+  height: 100vh;
+  background: url("../../../assets/images/img.png") no-repeat 100% 100%;
+
+  .head {
+    margin: 0 auto;
+    width: 50%;
+    min-width: 600px;
+    z-index: 20;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .center {
+      background: url("../../../assets/images/head.gif") no-repeat center 43% ;
+      background-size: 100%;
+      height: 10vh;
+      line-height: 7vh;
+      flex: 1;
+      font-size: 5vh;
+      color: #5cf8ff;
+      font-family: cursive;
+      font-weight: bolder;
+      text-shadow: 2px 2px 3px #ffdd45;
+      text-align: center;
+    }
+  }
+
+  .content {
+    width: 100vw;
+    height: 90vh;
+    box-sizing: border-box;
+    padding: 0 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .analysis{
+      width: 600px;
+      min-width: 400px;
+      height: 400px;
+      border-radius: 10px;
+      box-sizing: border-box;
+      background: rgba(255,255,255,0.8);
+      padding: 15px;
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>