首页修改

ruoyi-ui/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@babel/parser": "7.7.4",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "bpmn-js-token-simulation": "0.10.0",

ruoyi-ui/src/api/pay/homepage.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function getPanel(query) {
+  return request({
+    url: '/pay/home/panel',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getMonthPay(query) {
+  return request({
+    url: '/pay/home/monthPay',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getDeptPay(query) {
+  return request({
+    url: '/pay/home/deptPay',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getChuQin(query) {
+  return request({
+    url: '/pay/home/chuqin',
+    method: 'get',
+    params: query
+  })
+}

ruoyi-ui/src/main.js

@@ -38,6 +38,8 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+import dataV from '@jiaminghi/data-view'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +64,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(dataV)
 DictData.install()
 
 /**

ruoyi-ui/src/views/index.vue

@@ -1,191 +1,419 @@
 <template>
-  <div class="app-container home">
+  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>RuoYi-Vue-Plus后台管理框架</h2>
-        <p>
-          RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
-          <br/>
-          * 前端开发框架 Vue、Element UI<br/>
-          * 后端开发框架 Spring Boot<br/>
-          * 容器框架 Undertow 基于 XNIO 的高性能容器<br/>
-          * 权限认证框架 Sa-Token、Jwt 支持多终端认证系统<br/>
-          * 关系数据库 MySQL 适配 8.X 最低 5.7<br/>
-          * 关系数据库 Oracle 适配 11g 12c<br/>
-          * 关系数据库 PostgreSQL 适配 13 14<br/>
-          * 关系数据库 SQLServer 适配 2017 2019<br/>
-          * 缓存数据库 Redis 适配 6.X 最低 4.X<br/>
-          * 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br/>
-          * 数据库框架 p6spy 更强劲的 SQL 分析<br/>
-          * 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br/>
-          * 序列化框架 Jackson 统一使用 jackson 高效可靠<br/>
-          * Redis客户端 Redisson 性能强劲、API丰富<br/>
-          * 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br/>
-          * 分布式锁 Lock4j 注解锁、工具锁 多种多样<br/>
-          * 分布式幂等 Redisson 拦截重复提交<br/>
-          * 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br/>
-          * 分布式任务调度 Xxl-Job 高性能 高可靠 易扩展<br/>
-          * 分布式文件存储 Minio 本地存储<br/>
-          * 分布式云存储 七牛、阿里、腾讯 云存储<br/>
-          * 监控框架 SpringBoot-Admin 全方位服务监控<br/>
-          * 校验框架 Validation 增强接口安全性 严谨性<br/>
-          * Excel框架 Alibaba EasyExcel 性能优异 扩展性强<br/>
-          * 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br/>
-          * 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br/>
-          * 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br/>
-          * 部署方式 Docker 容器编排 一键部署业务集群<br/>
-          * 国际化 SpringMessage Spring标准国际化方案<br/>
-        </p>
-        <p>
-          <b>当前版本:</b> <span>v{{ version }}</span>
-        </p>
-        <p>
-          <el-tag type="danger">&yen;免费开源</el-tag>
-        </p>
-        <p>
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-cloudy"
-            plain
-            @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')"
-            >访问码云</el-button
-          >
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-cloudy"
-            plain
-            @click="goTarget('https://github.com/dromara/RuoYi-Vue-Plus')"
-          >访问GitHub</el-button
-          >
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-cloudy"
-            plain
-            @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus/wikis/pages?sort_id=4106467&doc_id=1469725')"
-          >更新日志</el-button
-          >
-        </p>
-      </el-col>
 
-      <el-col :sm="24" :lg="12" style="padding-left: 50px">
+    <div class="company" v-if="!$store.state.user.tenantId">
-        <el-row>
+      <el-input
-          <el-col :span="12">
+        style="width: 200px"
-            <h2>技术选型</h2>
+        placeholder="公司名称"
-          </el-col>
+        size="small"
+        prefix-icon="el-icon-search"
+        v-model="gsInfo.tenantName"
+        @keyup.enter.native="getGsInfoList">
+      </el-input>
+      <div class="cp-content" style="width: 200px">
+        <div :class="gsInfo.active_id===item.id?'cp-item active':'cp-item'" @click="changCompany(item.id)" v-for="item in gsInfo.list">{{ item.name }}</div>
+      </div>
+    </div>
+
+    <div :class="$store.state.user.tenantId?'content-all':'content'">
+
+      <div class="dashboard-editor-container">
+        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+          <!--月工资-->
+          <div id="analysis1" style="height: 350px"></div>
         </el-row>
-        <el-row>
+
-          <el-col :span="6">
+        <el-row :gutter="32">
-            <h4>后端技术</h4>
+          <el-col :xs="24" :sm="24" :lg="12">
-            <ul>
+            <div class="chart-wrapper">
-              <li>SpringBoot</li>
+              <dv-scroll-ranking-board :config="srbconfig" style="width:100%;height:350px" />
-              <li>Sa-Token</li>
+            </div>
-              <li>JWT</li>
-              <li>MyBatis</li>
-              <li>Druid</li>
-              <li>Jackson</li>
-              <li>...</li>
-            </ul>
           </el-col>
-          <el-col :span="6">
+          <el-col :xs="24" :sm="24" :lg="12">
-            <h4>前端技术</h4>
+            <div class="chart-wrapper">
-            <ul>
+              <div id="analysis2" style="height: 350px"></div>
-              <li>Vue</li>
+            </div>
-              <li>Vuex</li>
-              <li>Element-ui</li>
-              <li>Axios</li>
-              <li>Sass</li>
-              <li>Quill</li>
-              <li>...</li>
-            </ul>
           </el-col>
-        </el-row>
+          <el-col :xs="24" :sm="24" :lg="24">
+            <div class="chart-wrapper">
+              <div id="analysis3" style="height: 350px"></div>
+            </div>
           </el-col>
         </el-row>
-    <el-divider />
+      </div>
+
+    </div>
+
   </div>
 </template>
 
 <script>
+import { listTenant } from "@/api/pay/tenant";
+import { getMonthPay, getDeptPay, getChuQin } from "@/api/pay/homepage";
+import { scrollRankingBoard } from "@jiaminghi/data-view"
+import { parseTime } from "@/utils/ruoyi";
+import * as echarts from 'echarts'
+
+let barChart1 = null;
+let barChart2 = null;
+let barChart3 = null;
+
+function resizeFun() {
+  barChart1.resize();
+  barChart2.resize();
+  barChart3.resize();
+}
+
 export default {
-  name: "Index",
+  name: 'Index',
+  components: {
+    scrollRankingBoard
+  },
   data() {
     return {
-      // 版本号
+      // 公司信息
-      version: "0.8.3",
+      gsInfo:{
-    };
+        tenantName:'',
+        active_id:this.$store.state.user.tenantId,
+        list:[]
+      },
+      lineChartData: {
+        actualData: [],
+        monthList: []
+      },
+      srbconfig: {
+        data: [],
+        rowNum: null,
+        unit: '天'
+      },
+      pieChartData: {
+        year: null,
+        month: null,
+        workHours: []
+      },
+      barChartData: {
+        year: null,
+        month: null,
+        departList: [],
+        wages: []
+      }
+    }
+  },
+  created() {
+    if (!this.$store.state.user.tenantId) {
+      this.getGsInfoList()
+    }else {
+      this.gsInfo.active_id = this.$store.state.user.tenantId
+      this.getReportDateList();
+      this.handleLineList();
+      this.getHours();
+    }
   },
   methods: {
-    goTarget(href) {
+    // 获取左侧公司列表
-      window.open(href, "_blank");
+    getGsInfoList(){
+      listTenant({ name: this.gsInfo.tenantName }).then(response => {
+        if(response.rows.length>0){
+          this.gsInfo.list = response.rows;
+          this.gsInfo.active_id = this.gsInfo.list[0].id
+          this.getReportDateList();
+          this.handleLineList();
+          this.getHours();
+        }else{
+          this.$alert(`没有查到相关公司，暂无数据！`, `提示`, {
+            type: 'warning'
+          });
+        }
+      });
     },
+    // 选择公司
+    changCompany(id){
+      this.gsInfo.active_id = id;
+      this.reset();
+      window.removeEventListener("resize", resizeFun);
+      this.getReportDateList();
+      this.handleLineList();
+      this.getHours();
     },
-};
+    reset(){
-</script>
+      this.lineChartData= {
+        actualData: [],
+        monthList: []
+      }
+      this.srbconfig= {
+        data: [],
+        rowNum: null,
+        unit: '天'
+      };
+      this.pieChartData= {
+        year: null,
+        month: null,
+        workHours: []
+      };
+      this.barChartData= {
+        year: null,
+        month: null,
+        departList: [],
+        wages: []
+      };
+    },
+    handleLineList() {
+      getMonthPay({ tenantId: this.gsInfo.active_id }).then(response => {
+        response.rows.forEach(item => {
+          this.lineChartData.actualData.push(Math.round(item.actuallyPayMoney * Math.pow(10, 2)) / Math.pow(10, 2))
+          var month = null
+          month = item.month + '月'
+          this.lineChartData.monthList.push(month)
+        })
 
-<style scoped lang="scss">
+        this.$nextTick(() => {
-.home {
+          this.initChart()
-  blockquote {
+        })
-    padding: 10px 20px;
+      })
-    margin: 0 0 20px;
+    },
-    font-size: 17.5px;
+    getReportDateList() {
-    border-left: 5px solid #eee;
+      let query = {
+        date: parseTime(new Date(), '{y}-{m}'),
+        tenantId: this.gsInfo.active_id
       }
-  hr {
+      getChuQin(query).then(res => {
-    margin-top: 20px;
+        this.srbconfig.data = res.data;
-    margin-bottom: 20px;
+        this.srbconfig = {...this.srbconfig};
-    border: 0;
+
-    border-top: 1px solid #eee;
+        this.$nextTick(() => {
+          this.initChart()
+        })
+      })
+    },
+    getHours() {
+      getDeptPay({tenantId: this.gsInfo.active_id}).then(response => {
+        response.rows.forEach(mon => {
+          var list = {
+            value: mon.dayWorkHours,
+            name: mon.deptName
           }
-  .col-item {
+          this.pieChartData.workHours.push(list);
-    margin-bottom: 20px;
+          this.barChartData.departList.push(mon.deptName)
+          this.barChartData.wages.push(mon.actuallyPayMoney)
+        })
+        if(response.rows.length>0){
+          this.pieChartData.year = response.rows[0].year
+          this.pieChartData.month = response.rows[0].month
+          this.barChartData.year = response.rows[0].year
+          this.barChartData.month = response.rows[0].month
         }
 
-  ul {
+        this.$nextTick(() => {
-    padding: 0;
+          this.initChart()
-    margin: 0;
+        })
-  }
+      })
+    },
+    initChart() {
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+      barChart1 = echarts.init(document.getElementById('analysis1'));
-  font-size: 13px;
+      barChart2 = echarts.init(document.getElementById('analysis2'))
-  color: #676a6c;
+      barChart3 = echarts.init(document.getElementById('analysis3'))
-  overflow-x: hidden;
 
-  ul {
+      barChart1.setOption({
-    list-style-type: none;
+        xAxis: {
+          data: this.lineChartData.monthList,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          // data: ['expected', 'actual']
+          data: ['工资']
+        },
+        series: [
+          {
+            name: '工资',
+            smooth: true,
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#3888fa',
+                lineStyle: {
+                  color: '#3888fa',
+                  width: 2
+                },
+                areaStyle: {
+                  color: '#f3f8ff'
+                }
               }
+            },
+            data: this.lineChartData.actualData,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut'
+          }]
+      })
 
-  h4 {
+      barChart2.setOption({
-    margin-top: 0px;
+        title: {
+          text: this.pieChartData.year + '-' + this.pieChartData.month + '月工时',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '工时',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '50%'],
+            data: this.pieChartData.workHours,
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
           }
+        ]
+      })
 
-  h2 {
+      barChart3.setOption({
-    margin-top: 10px;
+        title: {
-    font-size: 26px;
+          text: this.barChartData.year + '-' + this.barChartData.month + '月工资',
-    font-weight: 100;
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {  // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 30,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: this.barChartData.departList,
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function(value) {
+              return value.split("").join("\n");
+            }
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
           }
+        }],
+        series: [{
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: this.barChartData.wages,
+          animationDuration: 6000
+        }]
+      })
 
-  p {
+      window.addEventListener("resize", resizeFun)
-    margin-top: 10px;
+    },
+  }
+}
+</script>
 
-    b {
+<style lang="scss" scoped>
-      font-weight: 700;
+.app-container {
+  display: flex;
+  .company {
+    border-radius: 5px;
+    width: 230px;
+    height: calc(100vh - 115px);
+    overflow-y: auto;
+    .cp-content {
+      margin-top: 20px;
+      .cp-item {
+        cursor: pointer;
+        padding: 6px 10px 6px 5px;
+        color: #424242;
+        font-size: 14px;
+        &:hover {
+          background: #f6f6f6;
+        }
+      }
+      .active{
+        background: #edf6ff;
+      }
+    }
+  }
+  .content{
+    padding-left: 15px;
+    width: calc(100% - 250px);
+    .el-button--medium {
+      padding: 2px 0px;
     }
   }
+  .content-all{
+    width: 100%;
+    .el-button--medium {
+      padding: 2px 0px;
+    }
+  }
+}
+.dash {
+  min-height: calc(100vh - 84px);
+  text-align: center;
+  background: #A0E1DD;
+}
+.biaoti {
+  font-size: 60px;
+  font-weight: bold;
+  line-height: calc(100vh - 84px);
+  text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,
+  -3px -3px 0 #fff, -4px -4px 0 #fff,
+  -5px -5px 5px rgb(0, 0, 0),
+  -5px -5px 1px rgb(0, 0, 0);
+}
+.dv-scroll-ranking-board{
+  color:#333;
+}
+
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
 
-  .update-log {
+  .chart-wrapper {
-    ol {
+    background: #fff;
-      display: block;
+    padding: 16px 16px 0;
-      list-style-type: decimal;
+    margin-bottom: 32px;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
   }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
   }
 }
 </style>
-