當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue若依管理系统-实现管理员配置首页计数框/折线图

發布時間：2023/12/16 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue若依管理系统-实现管理员配置首页计数框/折线图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

需求
實現效果
主要代碼
- 前端首頁
- 面板組組件：
- 折線圖組件：
詳細解釋
- - - 面板組
    - 折線圖
  - 關于他們底下的數據
后端傳來的json參考
租戶配置的頁面
- 后端，這里做個參考就好，每個項目都不一樣，就是把數據返回前端，樣子就是json上那個樣子

關鍵詞：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", }

/*** 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*/@Overridepublic 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*/@Overridepublic 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 hSetExpireCustomize(final String key, String mapKey, Object value, Date date) {boolean result = false;try {redisService.redisTemplate.opsForHash().put(key, mapKey, value);redisService.redisTemplate.expireAt(key, date);result = true;} catch (Exception e) {e.printStackTrace();}return result;}/*** 獲取hash緩存* @param key redis的key* @param filed hash的map的key* @return*/public static Object hGet(String key, Object filed) {return redisService.redisTemplate.opsForHash().get(key, filed);}/*** 當前key是否存在value*/public static Boolean hExist(String key, String mapName){return redisService.redisTemplate.opsForHash().hasKey(key, mapName);}/*** 以集合的方式獲取這些鍵對應的map* @param key redis的key* @param list 將hash中的key存到list當中查找* @return*/public static List HmultiGet(String key, List list) {return redisService.redisTemplate.opsForHash().multiGet(key, list);}/*** 刪除整個對應key的redis數據*/public static Boolean DelAll(String key) {return redisService.redisTemplate.delete(key);}/*** 刪除hash中某個對應key的數據* @param key redis的key* @param filed key* @return*/public static Long HDelete(String key, Object filed){return redisService.redisTemplate.opsForHash().delete(key, filed);}/*** redis的hash自助工具：先判空，有數據就刪除，重新寫入；否則，直接寫入* @param key redis的key* @param filed 數據的key* @param obj 數據的value*/public static void HelpMeSet(String key, Object filed, Object obj){if (RedisHashUtils.hExist(key, String.valueOf(filed))) {RedisHashUtils.HDelete(key, String.valueOf(filed));}RedisHashUtils.hSet(key, String.valueOf(filed), obj);} }

總結

以上是生活随笔為你收集整理的Vue若依管理系统-实现管理员配置首页计数框/折线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：一个jsp+cgi+html小工程,完成
下一篇：英特尔推出SD卡巨细电脑配Atom处理