vue若依this.download方法怎么改成get方法（Vue若依管理系统-实现管理员配置首页计数框/折线图）

时间2025-05-02 01:47:01分类IT科技浏览3500

导读：关键词：Vue；若依管理系统；实现管理员配置首页计数框/折线图数据...

关键词：Vue；若依管理系统；实现管理员配置首页计数框/折线图数据

需求

自定义若依首页展示的数据内容，并且每个租户能够自行配置

没实现之前的页面：

实现效果

管理员配置展示信息（计数框选择入库、提交、核销、采集。折线图选发票数/转出数。）：

效果（页面展示与用户设置的选择相同）：

主要代码

首页+首页中的组件代码：https://cloud.189.cn/web/share?code=MZfaQnqi6Nbm（访问码：0w36）

前端首页

主页 <template> <div className="dashboard-editor-container"> <panel-group @handleSetLineChartData="handleSetLineChartData" :count01="countList.count01" :count-t0="countList.countT0" :count-s0="countList.countS0" :count05="countList.count05" :count10="countList.count10" :count15="countList.count15" :count20="countList.count20" :count25="countList.count25" />  <el-row style="background:#fff; padding:16px 16px 0; margin-bottom:32px;"> <line-chart :chart-data="lineChartData" /> </el-row>                      </div> </template> <script> import { getConfigInfo, getIndexLinechartData, getIndexLinechartDataByMonth, getIndexSelectBoxCount01, getIndexSelectBoxCount05, getIndexSelectBoxCount10, getIndexSelectBoxCount15, getIndexSelectBoxCount20, getIndexSelectBoxCount25, getIndexSelectBoxCountS0, getIndexSelectBoxCountT0 } from "@/api/index"; // 面板组 import PanelGroup from ./dashboard/PanelGroup // 折线图 import LineChart from ./dashboard/LineChart // 雷达图 import RaddarChart from ./dashboard/RaddarChart // 饼状图 import PieChart from ./dashboard/PieChart // 条形图 import BarChart from ./dashboard/BarChart export default { name: Index, components: { PanelGroup, LineChart, RaddarChart, PieChart, BarChart }, data() { return { /** 当前配置信息，这里是存放获取的租户管理员配置的展示信息 */ config: {}, /** 面板组，该用户配置的计数列表，这里你显示什么需要先定义 */ countList: { count01: null, countT0: null, countS0: null, count05: null, count10: null, count15: null, count20: null, count25: null, }, // 该用户选择的面板组（数组） selected: null, /** 折线图 */ lineChartData: { expectedData: [200, 192, 120, 144, 160, 130, 140], actualData: [180, 160, 151, 106, 145, 150, 130], dateData: ["1", "2", "3", "4", "5", "6", "7"] }, } }, created() { /** 2022-5-31,初始化租户参数 */ this.configInfo(); }, methods: { /** 2022-5-27 ，获取接口参数信息，这里是配置的，我做了管理员选项，让每个租户管理自己选要展示的框 */ configInfo(){ getConfigInfo().then(response => { this.config = response.data; this.selected = this.config.selectBoxCount.split(","); /** 2022-5-31 ，获取面板组框：获取该租户设置了展示哪几个计数框 */ this.check(this.selected); /** 2022-5-31,获取折线图数据 */ this.getLinechardData(); }); }, /** 判断当前选中了那些，注：这是面板组的，getIndexSelectBoxCount01-xx ，这些方法是每个框各自获取自己的框的数据，因为是配置的，就分别获取的 */ check(selected) { for (const s of selected) { switch (s) { case "01": getIndexSelectBoxCount01().then(response => { this.countList.count01 = parseInt(response.data); }); break; case "S0": getIndexSelectBoxCountS0().then(response => { this.countList.countT0 = parseInt(response.data); }); break; case "T0": getIndexSelectBoxCountT0().then(response => { this.countList.countS0 = parseInt(response.data); }); break; case "05": getIndexSelectBoxCount05().then(response => { this.countList.count05 = parseInt(response.data); }); break; case "10": getIndexSelectBoxCount10().then(response => { this.countList.count10 = parseInt(response.data) }); break; case "15": getIndexSelectBoxCount15().then(response => { this.countList.count15 = parseInt(response.data); }); break; case "20": getIndexSelectBoxCount20().then(response => { this.countList.count20 = parseInt(response.data); }); break; case "25": getIndexSelectBoxCount25().then(response => { this.countList.count25 = parseInt(response.data); }); break; } } }, /** 获取折现图的数据，这里也是管理员可配置，所以用到了判断 */ getLinechardData() { getIndexLinechartDataByMonth(this.config.selectLine).then(response => { this.lineChartData = response.data; // 当前租户设置中选择展示的折线图（1：第一种，2：第二种） if (this.config.selectLine === 1) { this.lineChartData.selectName = [发票数,核销数] } else { this.lineChartData.selectName = [发票数,转出数] } }) }, // 调用变化线型图，给4个数据卡片调用的，卡片调用的时候就加载卡片传过来的数据 handleSetLineChartData(type) { // 根据子集的调用切换对应的数据 // this.lineChartData = lineChartData[type] }, } } </script> <style lang="scss" scoped> .dashboard-editor-container { padding: 32px; background-color: rgb(240, 242, 245); position: relative; .chart-wrapper { background: #fff; padding: 16px 16px 0; margin-bottom: 32px; } } @media (max-width: 1024px) { .chart-wrapper { padding: 8px; } } </style> 在webStorm找到src/views/dashboard ，里面就是首页这几个组件

面板组组件：

<template> <el-row :gutter="40" class="panel-group"> <el-col v-show="count01 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-people"> <svg-icon icon-class="nested" class-name="card-panel-icon"/> </div> <div class="card-panel-description"> <div class="card-panel-text"> 入库 </div> <count-to :start-val="0" :end-val="count01" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="countT0 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-message"> <svg-icon icon-class="nested" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 提交 </div> <count-to :start-val="0" :end-val="countT0" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="countS0 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-money"> <svg-icon icon-class="post" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 核销 </div> <count-to :start-val="0" :end-val="countS0" :duration="3200" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="count05 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-shopping"> <svg-icon icon-class="xy-choice2" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 采集 </div> <count-to :start-val="0" :end-val="count05" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="count10 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-shopping"> <svg-icon icon-class="nested" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 认证提交 </div> <count-to :start-val="0" :end-val="count10" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="count15 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-shopping"> <svg-icon icon-class="nested" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 验收 </div> <count-to :start-val="0" :end-val="count15" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="count20 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-shopping"> <svg-icon icon-class="nested" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 认证 </div> <count-to :start-val="0" :end-val="count20" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> <el-col v-show="count25 != null" :xs="12" :sm="12" :lg="6" class="card-panel-col"> <div class="card-panel"> <div class="card-panel-icon-wrapper icon-shopping"> <svg-icon icon-class="nested" class-name="card-panel-icon" /> </div> <div class="card-panel-description"> <div class="card-panel-text"> 转出 </div> <count-to :start-val="0" :end-val="count25" :duration="2600" class="card-panel-num" /> </div> </div> </el-col> </el-row> </template> <script> import CountTo from vue-count-to export default { props:{ count01: {type: Number, default: 0}, countT0: {type: Number, default: 0}, countS0: {type: Number, default: 0}, count05: {type: Number, default: 0}, count10: {type: Number, default: 0}, count15: {type: Number, default: 0}, count20: {type: Number, default: 0}, count25: {type: Number, default: 0}, }, components: { CountTo } } </script> <style lang="scss" scoped> .panel-group { margin-top: 18px; .card-panel-col { margin-bottom: 32px; } .card-panel { height: 108px; font-size: 12px; position: relative; overflow: hidden; color: #666; background: #fff; box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05); &:hover { .card-panel-icon-wrapper { color: #fff; } .icon-people { background: #40c9c6; } .icon-message { background: #36a3f7; } .icon-money { background: #f4516c; } .icon-shopping { background: #34bfa3 } } .icon-people { color: #40c9c6; } .icon-message { color: #36a3f7; } .icon-money { color: #f4516c; } .icon-shopping { color: #34bfa3 } .card-panel-icon-wrapper { float: left; margin: 14px 0 0 14px; padding: 16px; transition: all 0.38s ease-out; border-radius: 6px; } .card-panel-icon { float: left; font-size: 48px; } .card-panel-description { float: right; font-weight: bold; margin: 26px; margin-left: 0px; .card-panel-text { line-height: 18px; color: rgba(0, 0, 0, 0.45); font-size: 16px; margin-bottom: 12px; } .card-panel-num { font-size: 20px; } } } } @media (max-width:550px) { .card-panel-description { display: none; } .card-panel-icon-wrapper { float: none !important; width: 100%; height: 100%; margin: 0 !important; .svg-icon { display: block; margin: 14px auto !important; float: none !important; } } } </style>

折线图组件：

<template> <div :class="className" :style="{height:height,width:width}" /> </template> <script> import echarts from echarts require(echarts/theme/macarons) // echarts theme import resize from ./mixins/resize export default { mixins: [resize], props: { className: { type: String, default: chart }, width: { type: String, default: 100% }, height: { type: String, default: 350px }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true, } }, data() { return { chart: null, } }, watch: { chartData: { deep: true, handler(val) { // console.log(触发了Line组件调用x轴初始化) this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, created() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, macarons) this.setOptions(this.chartData) }, setOptions({ dateData, firstData, secondData, selectName } = {}) { this.chart.setOption({ xAxis: { data: dateData, 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: [发票数, 核销数] data: selectName }, // 图表描述 series: [{ name: selectName?.[0], itemStyle: { normal: { color: #FF005A, lineStyle: { color: #FF005A, width: 2 } } }, // 柔性过过渡 smooth: true, type: line, data: firstData, animationDuration: 2800, animationEasing: cubicInOut }, { name: selectName?.[1], smooth: true, type: line, itemStyle: { normal: { color: #3888fa, lineStyle: { color: #3888fa, width: 2 }, areaStyle: { color: #f3f8ff } } }, data: secondData, animationDuration: 2800, animationEasing: quadraticOut }] }) } } } </script>

详细解释

面板组

大概说一下，实现面板组的话，需要先在组件里面写好，你都要有哪些框，先在页面写好，通过v-show控制其是否渲染

可以看到这里面都用了v-show ，之后如果管理员没有选中的话，返回到前端肯定是null ，那样就不会显示了，从而实现根据配置展示

折线图

这个方法，就是对应首页的折线图的标题。data: [‘发票数’, ‘核销数’]这样标题就是固定的，为了实现需求，我们需要通过后端传过来，这个selectName就是折线图的标题数组

首页把这个selectName传递给组件

这是用到了父传子，可以看到:chart-data=“lineChartData ” ，将父组件的数据传给了折线图组件

关于他们底下的数据

比如折线图，原来的数据如下，这些是写死的，所以通过后端传入的数据改一下就行。折线图不是有两个标题吗，firstData：就是第一个标题的数值；secondData：就是第二个标题的；dateData：就是底下的数（天数）

lineChartData: { firstData: [200, 192, 120, 144, 160, 130, 140], secondData: [180, 160, 151, 106, 145, 150, 130], dateData: ["1", "2", "3", "4", "5", "6", "7"] },

把上面固定的数据通过后端传过来，就能实现租户自定义了

这块就是后端返回的数据，赋值给了这些数据：

后端传来的json参考

面板组 {"msg":"操作成功","code":200,"data":"0"} 折线图 { "msg": "获取数据成功!", "code": 200, "data": { "dateData": [ "2021-07", "2021-08", "2021-09", "2021-10", "2021-11", "2021-12", "2022-01", "2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "本月" ], "firstData": [ "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0" ], "secondData": [ "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0" ] } } 管理员配置的 { "selectBoxCount": "05,01,S0,T0", "selectLine": "2", } js /** * 2022-5-27,获取接口参数 */ export function getConfigInfo(){ return request({ url: invoice/invoice/getConfigInfo, method: get, }) } /** * 2022-5-27,首页展示面板图 */ export function getIndexSelectBoxCount01(){ return request({ url: invoice/invoice/getIndexSelectBoxCount01, method: get, }) } export function getIndexSelectBoxCountS0(){ return request({ url: invoice/invoice/getIndexSelectBoxCountS0, method: get, }) } export function getIndexSelectBoxCountT0(){ return request({ url: invoice/invoice/getIndexSelectBoxCountT0, method: get, }) } export function getIndexSelectBoxCount05(){ return request({ url: invoice/invoice/getIndexSelectBoxCount05, method: get, }) } export function getIndexSelectBoxCount10(){ return request({ url: invoice/invoice/getIndexSelectBoxCount10, method: get, }) } export function getIndexSelectBoxCount15(){ return request({ url: invoice/invoice/getIndexSelectBoxCount15, method: get, }) } export function getIndexSelectBoxCount20(){ return request({ url: invoice/invoice/getIndexSelectBoxCount20, method: get, }) } export function getIndexSelectBoxCount25(){ return request({ url: invoice/invoice/getIndexSelectBoxCount25, method: get, }) } //查询首页折线图当前周数据 export function getIndexLinechartData(){ return request({ url: /invoice/invoice/getindexlinechart, method: get }) } //查询首页折线图当年数据 export function getIndexLinechartDataByMonth(query){ return request({ url: /invoice/invoice/getIndexLineChartByMonth, method: get, params: {type: query} }) }

租户配置的页面

template  <el-col :span="24"> <el-divider content-position="center">首页参数</el-divider> </el-col> <el-col :span="24"> <label style="display: flex;margin-bottom: 20px">首页中展示的计数框</label> <el-checkbox-group v-model="checkboxGroup" :min="1" :max="4" size="small" @change="handleUpdateCheck"> <el-col :span="24"> <el-checkbox label="入库" border></el-checkbox> <el-checkbox label="提交" border></el-checkbox> <el-checkbox label="核销" border></el-checkbox> </el-col> <el-col :span="24" style="display: flex; margin-top: 5px"> <el-checkbox label="采集" border></el-checkbox> <el-checkbox label="认证提交" border></el-checkbox> <el-checkbox label="验收" border></el-checkbox> <el-checkbox label="认证" border></el-checkbox> <el-checkbox label="转出" border></el-checkbox> </el-col> </el-checkbox-group> </el-col> <el-col :span="24"> <label style="display: flex;margin-bottom: 20px; margin-top: 20px">首页中展示的折线图</label> <el-col :span="24"> <el-radio-group v-model="form.selectLine" size="small" @change="handleUpdateLineCheck"> <el-radio label="1" border>发票数/核销数</el-radio> <el-radio label="2" border>发票数/转出数</el-radio> </el-radio-group> </el-col> </el-col> data data{ checkboxGroup: [], } methods methods: { /** 2022-5-27,kxb,获得并计算当前选中的首页计数框的值 */ setSelectCountBox(v){ this.checkboxGroup = []; for (let node of v) { if (node === "01") this.checkboxGroup.push("入库"); if (node === "S0") this.checkboxGroup.push("提交"); if (node === "T0") this.checkboxGroup.push("核销"); if (node === "05") this.checkboxGroup.push("采集"); if (node === "10") this.checkboxGroup.push("认证提交"); if (node === "15") this.checkboxGroup.push("验收"); if (node === "20") this.checkboxGroup.push("认证"); if (node === "25") this.checkboxGroup.push("转出"); } }, // 多选框改变调用 handleUpdateCheck(checkeds){ let str = ""; for (let check of checkeds) { switch (check) { case "入库": str === "" ? str = "01" : str += ",01" break; case "提交": str === "" ? str = "S0" : str += ",S0" break; case "核销": str === "" ? str = "T0" : str += ",T0" break; case "采集": str === "" ? str = "05" : str += ",05" break; case "认证提交": str === "" ? str = "10" : str += ",10" break; case "验收": str === "" ? str = "15" : str += ",15" break; case "认证": str === "" ? str = "20" : str += ",20" break; case "转出": str === "" ? str = "25" : str += ",25" break; } } this.form.selectBoxCount = str; }, handleUpdateLineCheck(checked){ this.form.selectLine = checked.toString(); }, }

存到sql的数据长这个样子

后端，这里做个参考就好，每个项目都不一样，就是把数据返回前端，样子就是json上那个样子

controller /** * 2022-5-27，获取当前用户展示的显示框的信息。区别：根据后缀01 、S0 、T0来区分 */ // 获取接口参数 @GetMapping("getConfigInfo") public AjaxResult getConfigInfo(){ YsIvInterfacelinemsg ysIvInterfacelinemsg = ysIvInterfacelinemsgService.selectCurIvInterfaceLinemsg(); RemoteYsIvInterfacelinemsg remoteYsIvInterfacelinemsg = new RemoteYsIvInterfacelinemsg(); BeanUtils.copyBeanProp(remoteYsIvInterfacelinemsg, ysIvInterfacelinemsg); return AjaxResult.success(ysIvInterfacelinemsg); } // 入库 @GetMapping("getIndexSelectBoxCount01") public AjaxResult getIndexSelectBoxCount01(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_NOTYET)); } // 提交 @GetMapping("getIndexSelectBoxCountS0") public AjaxResult getIndexSelectBoxCountS0(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_SUBMIT)); } // 核销 @GetMapping("getIndexSelectBoxCountT0") public AjaxResult getIndexSelectBoxCountT0(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_DESTROY)); } // 采集 @GetMapping("getIndexSelectBoxCount05") public AjaxResult getIndexSelectBoxCount05(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_CONFIRMED)); } // 认证提交 @GetMapping("getIndexSelectBoxCount10") public AjaxResult getIndexSelectBoxCount10(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_AUTH_SUBMIT)); } // 验收 @GetMapping("getIndexSelectBoxCount15") public AjaxResult getIndexSelectBoxCount15(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_AUTH_CHECK)); } // 认证 @GetMapping("getIndexSelectBoxCount20") public AjaxResult getIndexSelectBoxCount20(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_AUTH)); } // 转出 @GetMapping("getIndexSelectBoxCount25") public AjaxResult getIndexSelectBoxCount25(){ return AjaxResult.success(ysInvoiceService.getIndexSelectBoxCount(InvoiceConstants.OPERATE_STATUS_TRANSFER)); } /** 获取折线图数据 */ @GetMapping("/getIndexLineChartByMonth") public AjaxResult getIndexLineChart(@RequestParam String type){ Map<String,Object> map = ysInvoiceService.getOrSetLineCountByRedis(type); return AjaxResult.success("获取数据成功!", map); } service /** * 2022-5-27 ，获取最上方的采集、提交等等的数量 * @return */ public Long getIndexSelectBoxCount(String status){ ArrayList<String> condition = new ArrayList<>(); switch (status){ case InvoiceConstants.OPERATE_STATUS_NOTYET: // 入库过 condition.add(InvoiceConstants.OPERATE_STATUS_NOTYET); condition.add(InvoiceConstants.OPERATE_STATUS_SUBMIT); condition.add(InvoiceConstants.OPERATE_STATUS_DESTROY); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_NOTYET, condition); case InvoiceConstants.OPERATE_STATUS_SUBMIT: // 提交过 condition.add(InvoiceConstants.OPERATE_STATUS_NOTYET); condition.add(InvoiceConstants.OPERATE_STATUS_SUBMIT); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_SUBMIT, condition); case InvoiceConstants.OPERATE_STATUS_DESTROY: // 核销过 condition.add(InvoiceConstants.OPERATE_STATUS_DESTROY); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_DESTROY,condition); case InvoiceConstants.OPERATE_STATUS_CONFIRMED: // 采集过 condition.add(InvoiceConstants.OPERATE_STATUS_CONFIRMED); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_SUBMIT); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_CHECK); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH); condition.add(InvoiceConstants.OPERATE_STATUS_TRANSFER); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_CONFIRMED, condition); case InvoiceConstants.OPERATE_STATUS_AUTH_SUBMIT: // 认证提交过 condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_SUBMIT); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_CHECK); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH); condition.add(InvoiceConstants.OPERATE_STATUS_TRANSFER); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_AUTH_SUBMIT, condition); case InvoiceConstants.OPERATE_STATUS_AUTH_CHECK: // 验收过 condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_CHECK); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH); condition.add(InvoiceConstants.OPERATE_STATUS_TRANSFER); case InvoiceConstants.OPERATE_STATUS_AUTH: // 认证过 condition.add(InvoiceConstants.OPERATE_STATUS_AUTH); condition.add(InvoiceConstants.OPERATE_STATUS_TRANSFER); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_AUTH, condition); case InvoiceConstants.OPERATE_STATUS_TRANSFER: // 转出过 condition.add(InvoiceConstants.OPERATE_STATUS_TRANSFER); return getOrSetBoxCountByRedis(InvoiceConstants.OPERATE_STATUS_TRANSFER, condition); } return 0L; } /** * 通过redis获取，或存到redis * @param status * @return */ private Long getOrSetBoxCountByRedis(String status, ArrayList<String> condition){ String key = "index_SelectBox:" + SecurityUtils.getEnterpriseId(); // 1.如果缓存存在，则从缓存取 if (RedisHashUtils.hExist(key,status)) { return (Long) RedisHashUtils.hGet(key, status); } // 2.如果缓存不存在，则从数据库取 YsInvoice invoice = new YsInvoice(); invoice.getParams().put("operateStatus",condition); Long value = ysInvoiceMapper.selectBoxCount(invoice); RedisHashUtils.hSetExpireOneDay(key, status, value); return value; } /** * 获取首页折线图数据最近7天发票数据 * invoiceData:[], * destroyedData:[], * dateData:[] * * @return */ @Override public Map<String, Object> getIndexLineChartByMonth(String type) { Map<String, Object> dataMap = new LinkedHashMap<>(); List<String> dateData = new ArrayList<>(); List<Long> fisstDataList = new ArrayList<>(); List<Long> secondDataList = new ArrayList<>(); Long enterpriseId = SecurityUtils.getEnterpriseId(); for (int i = 12; i >= 0; i--) { String month = DateUtils.getNowBeforeMonthStr2(i); if (i == 0) { dateData.add("本月"); } else { dateData.add(month); } // 1.查询当前发票数 YsInvoice invoice = new YsInvoice(); ArrayList<String> condition = new ArrayList<>(); // 2.查询当前核销数/转出数 Long first = 0L; Long second = 0L; if ("1".equals(type)) { condition.add(InvoiceConstants.OPERATE_STATUS_NOTYET); condition.add(InvoiceConstants.OPERATE_STATUS_SUBMIT); condition.add(InvoiceConstants.OPERATE_STATUS_DESTROY); invoice.getParams().put("operateStatus", condition); invoice.getParams().put("startDate", month + "-01"); invoice.getParams().put("endDate",month + "-31"); first = ysInvoiceMapper.selectLineCount(invoice); second = ysInvoiceLogMapper.selectByTypeBetween(InvoiceConstants.OPERATE_STATUS_DESTROY,month + "-01",month + "-31", enterpriseId); } else if ("2".equals(type)) { condition.add(InvoiceConstants.OPERATE_STATUS_NOTYET); condition.add(InvoiceConstants.OPERATE_STATUS_CONFIRMED); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_SUBMIT); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH_CHECK); condition.add(InvoiceConstants.OPERATE_STATUS_AUTH); condition.add(InvoiceConstants.OPERATE_STATUS_TRANSFER); invoice.getParams().put("operateStatus", condition); invoice.getParams().put("startDate", month + "-01"); invoice.getParams().put("endDate",month + "-31"); first = ysInvoiceMapper.selectLineCount(invoice); second = ysInvoiceLogMapper.selectByTypeBetween(InvoiceConstants.OPERATE_STATUS_TRANSFER,month + "-01",month + "-31", enterpriseId); } fisstDataList.add(first); secondDataList.add(second); } dataMap.put("dateData", dateData); dataMap.put("firstData", fisstDataList); dataMap.put("secondData", secondDataList); return dataMap; } /** * 获取当前折线图的数据或从redis获取 * @param type 当前用户选择的类型 * @return */ @Override public Map<String, Object> getOrSetLineCountByRedis(String type){ String key = "index_SelectLine:" + SecurityUtils.getEnterpriseId(); // 1.如果缓存存在，则从缓存取 if (RedisHashUtils.hExist(key,type)) { return (Map<String, Object>) RedisHashUtils.hGet(key, type); } // 2.如果缓存不存在，则从数据库取 Map<String, Object> map = getIndexLineChartByMonth(type); // 当前日期到当月最后一天的秒数 LocalDateTime midnight = LocalDateTime.now().plusMonths(1).withDayOfMonth(1).withHour(0).withMinute(0).withSecond(0).withNano(0); long between = ChronoUnit.SECONDS.between(LocalDateTime.now(), midnight); RedisHashUtils.hSetExpireOneMonth(key, type, map, between); return map; } 工具类 public class RedisHashUtils { private final static RedisService redisService = SpringUtils.getBean(RedisService.class); /** * 直接以map集合的方式添加key对应的值 * @param key map中key已经存在，覆盖替换 * @param map map中key不存在，新增 * @return */ public static Boolean hmSet(final String key, Map map) { boolean result = false; try { redisService.redisTemplate.opsForHash().putAll(key, map); result = true; } catch (Exception e) { e.printStackTrace(); } return result; } /** * 以map集合的方式添加key对应的值，并缓存一天时间 */ public static Boolean hmSetExpireOneDay(final String key, Map map) { boolean result = false; try { redisService.redisTemplate.opsForHash().putAll(key, map); redisService.redisTemplate.expire(key, 1, TimeUnit.DAYS); result = true; } catch (Exception e) { e.printStackTrace(); } return result; } /** * 新增hashMap值 * @param key 为Redis的key * @param mapKey 为key对应的map值的key * @param value 为key对应的map值的值 * @return */ public static Boolean hSet(String key, String mapKey, Object value){ boolean result = false; try { redisService.redisTemplate.opsForHash().put(key, mapKey, value); result = true; } catch (Exception e) { e.printStackTrace(); } return result; } /** * 新增hashMap值，并缓存一天时间 */ public static Boolean hSetExpireOneDay(String key, String mapKey, Object value){ boolean result = false; try { redisService.redisTemplate.opsForHash().put(key, mapKey, value); redisService.redisTemplate.expire(key, 86400, TimeUnit.SECONDS); result = true; } catch (Exception e) { e.printStackTrace(); } return result; } public static Boolean hSetExpireOneMonth(String key, String mapKey, Object value, Long time){ boolean result = false; try { redisService.redisTemplate.opsForHash().put(key, mapKey, value); redisService.redisTemplate.expire(key, time, TimeUnit.SECONDS); result = true; } catch (Exception e) { e.printStackTrace(); } return result; } /** * 以hashMap集合的方式添加key对应的值，并缓存到指定的时间 */ public static Boolean %