diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue index d112e20..5d85a68 100644 --- a/src/views/dashboard/components/supplierStatus.vue +++ b/src/views/dashboard/components/supplierStatus.vue @@ -6,7 +6,7 @@
- +
@@ -37,42 +37,44 @@ return { seriesData: [], indicator: [], + title:'' }; }, mounted() { - // this.fetchData(); //真实获取数据，后期接口完成直接使用 - setTimeout(() => { - // 模拟数据后期注释掉 - let data = [ - { - status: "1", - statusName: "审核通过", - supplierCount: 70, - }, - { - status: "2", - statusName: "审核中", - supplierCount: 30, - }, - { - status: "3", - statusName: "审核不通过", - supplierCount: 20, - }, - ]; - this.seriesData = data.map((item) => { - return { - value: item.supplierCount, - name: item.statusName, - }; - }); - this.indicator = data.map((item) => { - return { - name: item.statusName, - max: item.supplierCount + 10, - }; - }); - }, 2000); + this.fetchData(); //真实获取数据，后期接口完成直接使用 + // setTimeout(() => { + // // 模拟数据后期注释掉 + // let data = [ + // { + // status: "1", + // statusName: "审核通过", + // supplierCount: 70, + // }, + // { + // status: "2", + // statusName: "审核中", + // supplierCount: 30, + // }, + // { + // status: "3", + // statusName: "审核不通过", + // supplierCount: 20, + // }, + // ]; + // this.seriesData = data.map((item) => { + // return { + // value: item.supplierCount, + // name: item.statusName, + // }; + // }); + // this.indicator = data.map((item) => { + // return { + // name: item.statusName, + // max: item.supplierCount + 10, + // }; + // }); + // this.title = `总\n\n50` + // }, 2000); }, methods: { fetchData() { @@ -89,6 +91,11 @@ max: item.supplierCount + 10, }; }); + let arr =[] + res.data.forEach(element => { + arr.push(element.supplierCount) + }); + this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}` }); }, }, diff --git a/src/api/cockpit/cockpit.js b/src/api/cockpit/cockpit.js index 558a773..0cf5eef 100644 --- a/src/api/cockpit/cockpit.js +++ b/src/api/cockpit/cockpit.js @@ -1,5 +1,5 @@ import request from '@/utils/request' - + // 获取设备列表（不分页）-带经纬度 export function getDevicePosition() { return request({ @@ -9,138 +9,174 @@ } // 设备总数、IOT设备数量、IOT设备在线率 export function getDeviceInfo() { - return request({ - url: 'statistic/deviceCount', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount', + method: 'get', + }) } - + // 近一月设备数量统计 export function getDeviceStatistics() { - return request({ - url: 'statistic/deviceCount/month', - method: 'get', - }) + return request({ + url: 'statistic/deviceCount/month', + method: 'get', + }) } - + // 设备品类统计 export function getDeviceCategory() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceCategory', + method: 'get', + }) } - + // 区域设备排行 export function getRegionalRank() { - return request({ - url: 'statistic/deviceCategory', - method: 'get', - }) + return request({ + url: 'statistic/deviceRegion', + method: 'get', + }) } // 经营面板 // 各分类用户数量 export function getUserCount() { - return request({ - url: 'statistic/userCount', - method: 'get', - }) + return request({ + url: 'statistic/userCount', + method: 'get', + }) } // 用户数量变化趋势 export function getUserTrend() { - return request({ - url: 'statistic/userTrend', - method: 'get', - }) + return request({ + url: 'statistic/userTrend', + method: 'get', + }) } // 订单统计 export function getUserCountStatistic(time) { - return request({ - url: time === 'year' ? 'statistic/userCount/year' : 'statistic/userCount/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/order/year' : 'statistic/order/month', + method: 'get', + }) } // 经销商订单同比/环比统计 export function getOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/orderRatio/year' : 'statistic/orderRatio/month', + method: 'get', + }) } // 分子公司订单同比/环比统计 export function getBranchOrderRatio(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', + method: 'get', + }) } // 商机统计 export function getOpportunityStatistics(time) { - return request({ - url: time === 'year' ? 'statistic/branchOrderRatio/year' : 'statistic/branchOrderRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunity/year' : 'statistic/businessOpportunity/month', + method: 'get', + }) } // 商机同比/环比统计 export function getBusinessOpportunityRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityRatio/year' : 'statistic/businessOpportunityRatio/month', + method: 'get', + }) } // 商机转订单同比/环比统计 export function getBusinessOpportunityTurnRatio(time) { - return request({ - url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/businessOpportunityTurnRatio/year' : 'statistic/businessOpportunityTurnRatio/month', + method: 'get', + }) } // 供应商面板 // 供应商注册、审核通过、注册设备数量 export function getSupplierCount() { - return request({ - url: 'statistic/supplierCount', - method: 'get', - }) + return request({ + url: 'statistic/supplierCount', + method: 'get', + }) } // 供应商注册统计 export function getRegisterCount() { - return request({ - url: 'statistic/supplierRegister', - method: 'get', - }) + return request({ + url: 'statistic/supplierRegister', + method: 'get', + }) } // 供应商状态统计 export function getSupplierStatus() { - return request({ - url: 'statistic/supplierStatus', - method: 'get', - }) + return request({ + url: 'statistic/supplierStatus', + method: 'get', + }) } // 供应商资料预审统计 export function getPreReview(time) { - return request({ - url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/preReview/year' : 'statistic/preReview/month', + method: 'get', + }) } // 供应商录库评审统计 export function getInputReview(time) { - return request({ - url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', - method: 'get', - }) + return request({ + url: time === 'year' ? 'statistic/inputReview/year' : 'statistic/inputReview/month', + method: 'get', + }) +} +// sys/dict/code/{code} +// 供应商季度评价统计下拉框内容 +export function getSelectContent() { + return request({ + url: 'sys/dict/code/assessAnnual', + method: 'get', + }) +} +// 供应商季度评价统计 +export function getEvaluate(code) { + return request({ + url: `statistic/quarterlyEvaluate/${code}`, + method: 'get', + }) +} +// 供应商年度考核统计 +export function getAnnualAssess() { + return request({ + url: `statistic/annualAssess`, + method: 'get', + }) +} +// 设备注册数量统计 +export function getDeviceCount() { + return request({ + url: 'statistic/supplierDevice/month', + method: 'get', + }) +} +// 设备注册排行榜 +export function getDeviceRank() { + return request({ + url: 'statistic/supplierDevice/rank', + method: 'get', + }) } \ No newline at end of file diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue index 5b76ace..7dadfd8 100644 --- a/src/components/echart/barChart/MixChart.vue +++ b/src/components/echart/barChart/MixChart.vue @@ -114,12 +114,12 @@ }, // data: [], }, - xAxis: { + xAxis: [{ type: "category", data: [], - axisPointer: { - type: "shadow", - }, + // axisPointer: { + // type: "shadow", + // }, axisLine: { show: true, }, @@ -128,12 +128,17 @@ }, axisLabel: { show: true, - alignWithLabel: true, + color:'#000' + // alignWithLabel: true, }, - }, + }], yAxis: [], series: [], grid: { + left: 30, + right: 30, + bottom: 30, + top: 10, containLabel: true, }, }, @@ -141,7 +146,7 @@ }, watch: { xAxisData(newVal) { - this.option.xAxis.data = newVal; + this.option.xAxis[0].data = newVal; }, yAxisData(newVal) { this.option.yAxis = newVal; @@ -156,14 +161,13 @@ }, seriesData: { handler(newVal) { + console.log(newVal, 'newVal') const newSeries = []; for (const item of newVal) { const series = { + ...item, name: item.name, type: item.type, - // lineStyle: { - // width: 1, - // }, data: item.data, }; newSeries.push(series); @@ -190,7 +194,7 @@ initChart() { // 初始化echart this.chart = this.$echarts.init(this.$el, "tdTheme"); - if (this.option.xAxis.data.length) { + if (this.option.xAxis[0].data?.length) { this.chart.setOption(this.option, true); } else { this.chart.setOption({}, true); diff --git a/src/components/echart/barChart/verticalBarChart.vue b/src/components/echart/barChart/verticalBarChart.vue index 10508c5..8914b67 100644 --- a/src/components/echart/barChart/verticalBarChart.vue +++ b/src/components/echart/barChart/verticalBarChart.vue @@ -70,10 +70,10 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, - bottom: 5, - top: 30, + bottom: 30, + top: 10, containLabel: true, }, tooltip: { @@ -89,11 +89,11 @@ position: "top", axisLine: { lineStyle: { - color: this.axisLineColor, // 轴线的颜色 + color: '#000', // 轴线的颜色 }, }, axisLabel: { - color: this.fontColor, // X轴名称颜色 + color: '#000', // X轴名称颜色 fontSize: 14, }, }, @@ -102,10 +102,8 @@ { name: this.unit, type: "category", - // offset:-100,// 调整y轴文字位置 - // nameLocation:'start', - // offset:-20, - data:[], //y轴显示内容 + inverse: true, // 方向坐标轴 + data: [], //y轴显示内容 show: true, color: "#000", nameTextStyle: { @@ -121,11 +119,18 @@ show: false, }, axisLabel: { - color: this.fontColor, - // inside:true, + color: "#000", fontSize: 12, - formatter: function (value, index) { //时候后用于修改y轴显示内容 - return value + (index + 1); + formatter: function (value, index) { + // 用于修改y轴显示内容 + return "{a|NO.}" + `{a|${index + 1}}` + value; + }, + padding: [0, 0, 20, 0], + margin: -60, + rich: { + a: { + color: "blue", + }, }, }, }, @@ -146,27 +151,28 @@ const series = { name: item.name, type: "bar", - barWidth: 10, + barWidth: item.width, showBackground: true, - backgroundStyle:{ - color: 'rgba(180, 180, 180, 0.1)', - // borderWidth:2, - // borderColor:'#000' - + barCategoryGap: "100%", + backgroundStyle: { + color: "#fff", + // borderWidth:2, + // shadowBlur:10, + // shadowColor :'#000', + // shadowOffsetY:10 }, - itemStyle: { - normal: { - label: { - show: true, //显示文本 - position: ["90%", "-110%"], //数据值位置 - textStyle: { - color: "#000", - fontSize: "14", - }, - }, + label: { + show: item.width > 2, //显示文本 + // position: ["100%", "-110%"], //数据值位置 + textStyle: { + color: "#000", + fontSize: "14", }, + offset:[475,-10], + position:'left', }, data: item.data, + }; newSeries.push(series); } diff --git a/src/components/echart/lineChart/areaChart.vue b/src/components/echart/lineChart/areaChart.vue index 685a30d..e6dd671 100644 --- a/src/components/echart/lineChart/areaChart.vue +++ b/src/components/echart/lineChart/areaChart.vue @@ -1,13 +1,8 @@ + + + legend(newVal) { + this.option.legend[0].data = newVal; + // this.refreshEchart() + }, + unit(newVal) { + this.option.yAxis[0].name = newVal; + // this.refreshEchart() + }, + seriesData: { + handler(newVal) { + const newSeries = []; + for (const item of newVal) { + const series = { + name: item.name, + type: "line", + symbol: "none", // 去掉折线节点 + smooth: this.smooth, // 曲线变平滑 + lineStyle: { + width: 1, + }, + areaStyle: { + opacity: 0.5, + }, + data: item.data, + }; + newSeries.push(series); + } + this.$set(this.option, "series", newSeries); + // this.refreshChart() + }, + deep: true, + }, + }, + // mounted() { + // this.refreshChart() + // }, + // methods: { + // refreshChart() { + // this.unit && (this.option.yAxis[0].name = this.unit) + // if (this.xAxisData.length) { + // this.option.legend.data = this.legend + // this.option.xAxis[0].data = this.xAxisData + // const newSeries = [] + // for (const item of this.seriesData) { + // const series = { + // name: item.name, + // type: 'line', + // symbol: 'none', // 去掉折线节点 + // smooth: this.smooth, // 曲线变平滑 + // itemStyle: { + // color: `rgb(${item.color})` + // }, + // lineStyle: { + // width: 1 + // }, + // areaStyle: { + // color: new this.$echarts.graphic.LinearGradient( + // 0, 0, 0, 1, // 变化度 //三种由深及浅的颜色 + // [ + // { + // offset: 0.1, + // color: `rgba(${item.color},.6)` + // }, + // { + // offset: 1, + // color: 'rgba(0,0,0,.0)' + // } + // ] + // ) + // }, + // data: item.data + // } + // newSeries.push(series) + // } + // this.$set(this.option, 'series', newSeries) + // } + // } + // } +}; + + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计
-
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue index d112e20..5d85a68 100644 --- a/src/views/dashboard/components/supplierStatus.vue +++ b/src/views/dashboard/components/supplierStatus.vue @@ -6,7 +6,7 @@
- +
@@ -37,42 +37,44 @@ return { seriesData: [], indicator: [], + title:'' }; }, mounted() { - // this.fetchData(); //真实获取数据，后期接口完成直接使用 - setTimeout(() => { - // 模拟数据后期注释掉 - let data = [ - { - status: "1", - statusName: "审核通过", - supplierCount: 70, - }, - { - status: "2", - statusName: "审核中", - supplierCount: 30, - }, - { - status: "3", - statusName: "审核不通过", - supplierCount: 20, - }, - ]; - this.seriesData = data.map((item) => { - return { - value: item.supplierCount, - name: item.statusName, - }; - }); - this.indicator = data.map((item) => { - return { - name: item.statusName, - max: item.supplierCount + 10, - }; - }); - }, 2000); + this.fetchData(); //真实获取数据，后期接口完成直接使用 + // setTimeout(() => { + // // 模拟数据后期注释掉 + // let data = [ + // { + // status: "1", + // statusName: "审核通过", + // supplierCount: 70, + // }, + // { + // status: "2", + // statusName: "审核中", + // supplierCount: 30, + // }, + // { + // status: "3", + // statusName: "审核不通过", + // supplierCount: 20, + // }, + // ]; + // this.seriesData = data.map((item) => { + // return { + // value: item.supplierCount, + // name: item.statusName, + // }; + // }); + // this.indicator = data.map((item) => { + // return { + // name: item.statusName, + // max: item.supplierCount + 10, + // }; + // }); + // this.title = `总\n\n50` + // }, 2000); }, methods: { fetchData() { @@ -89,6 +91,11 @@ max: item.supplierCount + 10, }; }); + let arr =[] + res.data.forEach(element => { + arr.push(element.supplierCount) + }); + this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}` }); }, }, diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue index f373cab..43ef875 100644 --- a/src/views/dashboard/components/switch.vue +++ b/src/views/dashboard/components/switch.vue @@ -55,9 +55,14 @@ + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计 -
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue index d112e20..5d85a68 100644 --- a/src/views/dashboard/components/supplierStatus.vue +++ b/src/views/dashboard/components/supplierStatus.vue @@ -6,7 +6,7 @@
- +
@@ -37,42 +37,44 @@ return { seriesData: [], indicator: [], + title:'' }; }, mounted() { - // this.fetchData(); //真实获取数据，后期接口完成直接使用 - setTimeout(() => { - // 模拟数据后期注释掉 - let data = [ - { - status: "1", - statusName: "审核通过", - supplierCount: 70, - }, - { - status: "2", - statusName: "审核中", - supplierCount: 30, - }, - { - status: "3", - statusName: "审核不通过", - supplierCount: 20, - }, - ]; - this.seriesData = data.map((item) => { - return { - value: item.supplierCount, - name: item.statusName, - }; - }); - this.indicator = data.map((item) => { - return { - name: item.statusName, - max: item.supplierCount + 10, - }; - }); - }, 2000); + this.fetchData(); //真实获取数据，后期接口完成直接使用 + // setTimeout(() => { + // // 模拟数据后期注释掉 + // let data = [ + // { + // status: "1", + // statusName: "审核通过", + // supplierCount: 70, + // }, + // { + // status: "2", + // statusName: "审核中", + // supplierCount: 30, + // }, + // { + // status: "3", + // statusName: "审核不通过", + // supplierCount: 20, + // }, + // ]; + // this.seriesData = data.map((item) => { + // return { + // value: item.supplierCount, + // name: item.statusName, + // }; + // }); + // this.indicator = data.map((item) => { + // return { + // name: item.statusName, + // max: item.supplierCount + 10, + // }; + // }); + // this.title = `总\n\n50` + // }, 2000); }, methods: { fetchData() { @@ -89,6 +91,11 @@ max: item.supplierCount + 10, }; }); + let arr =[] + res.data.forEach(element => { + arr.push(element.supplierCount) + }); + this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}` }); }, }, diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue index f373cab..43ef875 100644 --- a/src/views/dashboard/components/switch.vue +++ b/src/views/dashboard/components/switch.vue @@ -55,9 +55,14 @@ + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计 -
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue index d112e20..5d85a68 100644 --- a/src/views/dashboard/components/supplierStatus.vue +++ b/src/views/dashboard/components/supplierStatus.vue @@ -6,7 +6,7 @@
- +
@@ -37,42 +37,44 @@ return { seriesData: [], indicator: [], + title:'' }; }, mounted() { - // this.fetchData(); //真实获取数据，后期接口完成直接使用 - setTimeout(() => { - // 模拟数据后期注释掉 - let data = [ - { - status: "1", - statusName: "审核通过", - supplierCount: 70, - }, - { - status: "2", - statusName: "审核中", - supplierCount: 30, - }, - { - status: "3", - statusName: "审核不通过", - supplierCount: 20, - }, - ]; - this.seriesData = data.map((item) => { - return { - value: item.supplierCount, - name: item.statusName, - }; - }); - this.indicator = data.map((item) => { - return { - name: item.statusName, - max: item.supplierCount + 10, - }; - }); - }, 2000); + this.fetchData(); //真实获取数据，后期接口完成直接使用 + // setTimeout(() => { + // // 模拟数据后期注释掉 + // let data = [ + // { + // status: "1", + // statusName: "审核通过", + // supplierCount: 70, + // }, + // { + // status: "2", + // statusName: "审核中", + // supplierCount: 30, + // }, + // { + // status: "3", + // statusName: "审核不通过", + // supplierCount: 20, + // }, + // ]; + // this.seriesData = data.map((item) => { + // return { + // value: item.supplierCount, + // name: item.statusName, + // }; + // }); + // this.indicator = data.map((item) => { + // return { + // name: item.statusName, + // max: item.supplierCount + 10, + // }; + // }); + // this.title = `总\n\n50` + // }, 2000); }, methods: { fetchData() { @@ -89,6 +91,11 @@ max: item.supplierCount + 10, }; }); + let arr =[] + res.data.forEach(element => { + arr.push(element.supplierCount) + }); + this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}` }); }, }, diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue index f373cab..43ef875 100644 --- a/src/views/dashboard/components/switch.vue +++ b/src/views/dashboard/components/switch.vue @@ -55,9 +55,14 @@ + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计 -
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue index d112e20..5d85a68 100644 --- a/src/views/dashboard/components/supplierStatus.vue +++ b/src/views/dashboard/components/supplierStatus.vue @@ -6,7 +6,7 @@
- +
@@ -37,42 +37,44 @@ return { seriesData: [], indicator: [], + title:'' }; }, mounted() { - // this.fetchData(); //真实获取数据，后期接口完成直接使用 - setTimeout(() => { - // 模拟数据后期注释掉 - let data = [ - { - status: "1", - statusName: "审核通过", - supplierCount: 70, - }, - { - status: "2", - statusName: "审核中", - supplierCount: 30, - }, - { - status: "3", - statusName: "审核不通过", - supplierCount: 20, - }, - ]; - this.seriesData = data.map((item) => { - return { - value: item.supplierCount, - name: item.statusName, - }; - }); - this.indicator = data.map((item) => { - return { - name: item.statusName, - max: item.supplierCount + 10, - }; - }); - }, 2000); + this.fetchData(); //真实获取数据，后期接口完成直接使用 + // setTimeout(() => { + // // 模拟数据后期注释掉 + // let data = [ + // { + // status: "1", + // statusName: "审核通过", + // supplierCount: 70, + // }, + // { + // status: "2", + // statusName: "审核中", + // supplierCount: 30, + // }, + // { + // status: "3", + // statusName: "审核不通过", + // supplierCount: 20, + // }, + // ]; + // this.seriesData = data.map((item) => { + // return { + // value: item.supplierCount, + // name: item.statusName, + // }; + // }); + // this.indicator = data.map((item) => { + // return { + // name: item.statusName, + // max: item.supplierCount + 10, + // }; + // }); + // this.title = `总\n\n50` + // }, 2000); }, methods: { fetchData() { @@ -89,6 +91,11 @@ max: item.supplierCount + 10, }; }); + let arr =[] + res.data.forEach(element => { + arr.push(element.supplierCount) + }); + this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}` }); }, }, diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue index f373cab..43ef875 100644 --- a/src/views/dashboard/components/switch.vue +++ b/src/views/dashboard/components/switch.vue @@ -55,9 +55,14 @@ + \ No newline at end of file diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue index 66f4c0e..dc58f77 100644 --- a/src/components/echart/lineChart/gradientLineChart.vue +++ b/src/components/echart/lineChart/gradientLineChart.vue @@ -67,16 +67,16 @@ curHeight: this.height, option: { grid: { - left: 10, + left: 30, right: 30, bottom: 30, - top: 5, - containLabel: true + top: 10, + containLabel: true, }, legend: { orient: "horizontal", // data:[], - type:'plain', + type:'scroll', left:'center', top:'bottom', itemWidth: 12, @@ -134,17 +134,17 @@ show: true, lineStyle: { color: ['#D7D9E0'], - type: 'dashed' + type: 'solid' } }, - max: function(value) { - return value.max + 2 - }, + // max: function(value) { + // return value.max + // }, minIntermal: 1, axisLine: { show:false, lineStyle: { - color: this.axisLineColor + color: '#000' } }, axisLabel: { diff --git a/src/components/echart/lineChart/lineChart.vue b/src/components/echart/lineChart/lineChart.vue index 2bd9fb2..73de2e3 100644 --- a/src/components/echart/lineChart/lineChart.vue +++ b/src/components/echart/lineChart/lineChart.vue @@ -9,7 +9,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/dashboardHeader.vue b/src/views/dashboard/components/dashboardHeader.vue index 1bf1aa9..a4262ae 100644 --- a/src/views/dashboard/components/dashboardHeader.vue +++ b/src/views/dashboard/components/dashboardHeader.vue @@ -1,7 +1,7 @@ @@ -23,13 +23,26 @@ \ No newline at end of file diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue index ca93a07..9665720 100644 --- a/src/views/dashboard/components/layoutChartRadar.vue +++ b/src/views/dashboard/components/layoutChartRadar.vue @@ -35,19 +35,9 @@ }, data() { return { - value: "12", - options: [ - { - value: "12", - label: "近一年", - }, - { - value: "1", - label: "近一月", - }, - ], seriesData: [], indicator: [], + legend: [], }; }, mounted() { @@ -56,11 +46,12 @@ methods: { fetchData() { getUserCount().then((res) => { - console.log(res.data, "用户分布统计"); // {roleName: '集团用户', userCount: 5} let data = []; + let legend = []; for (var i = 0; i < res.data.length; i++) { data.push(res.data[i].userCount); + legend.push(res.data[i].roleName); } this.seriesData = [ { @@ -73,10 +64,17 @@ ], }, ]; + // this.legend = legend + let max = 0; + for (var i = 0; i < res.data.length; i++) { + if(res.data[i].userCount > max){ + max = res.data[i].userCount + } + } this.indicator = res.data.map((item) => { return { name: item.roleName, - max: item.userCount + 10, + max: max, }; }); }); diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue index 3c9d632..8b2dc23 100644 --- a/src/views/dashboard/components/layoutChartVerticalBar.vue +++ b/src/views/dashboard/components/layoutChartVerticalBar.vue @@ -3,7 +3,9 @@
- 区域设备排行榜 + {{ + this.type === "region" ? "区域设备排行榜" : "设备注册排行榜" + }}
@@ -14,7 +16,7 @@ + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue index 6a36800..51111e7 100644 --- a/src/views/dashboard/components/orderStatistics.vue +++ b/src/views/dashboard/components/orderStatistics.vue @@ -15,7 +15,7 @@
- +
@@ -62,30 +62,30 @@ }; }, mounted() { - // this.fetchData(); - setTimeout(() => { - this.seriesData = [ - { - type:'line', - name:'经销商订单数', - data:[19,22,24,29,14,36,35] - }, - { - type:'line', - name:'分公司订单数', - data:[11,32,29,29,44,31,15] - } - ] - this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] - this.legend = ['经销商订单数','分公司订单数'] - }, 2000); + this.fetchData(); + // setTimeout(() => { + // this.seriesData = [ + // { + // type:'line', + // name:'经销商订单数', + // data:[19,22,24,29,14,36,35] + // }, + // { + // type:'line', + // name:'分公司订单数', + // data:[11,32,29,29,44,31,15] + // } + // ] + // this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月'] + // this.legend = ['经销商订单数','分公司订单数'] + // }, 2000); }, methods: { fetchData() { getUserCountStatistic(this.value).then((res) => { - console.log(res.data, "订单统计"); // 图表数据 let seriesData = []; + let legend = [] if (res.data.length > 0) { for (var user in res.data[0]) { legend.push(user); @@ -102,11 +102,17 @@ } }); } - this.seriesData = seriesData.slice(1) - this.xAxisData = seriesData.slice(0,1).data; + this.seriesData = [{...seriesData[0],name:'分公司订单数'},{...seriesData[2],name:'经销商订单数'}] + this.xAxisData = seriesData[1].data; + this.legend = ['分公司订单数','经销商订单数'] }); }, }, + watch:{ + value(){ + this.fetchData() + } + } }; diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue index 16c405b..674e50c 100644 --- a/src/views/dashboard/components/supplierAssessment.vue +++ b/src/views/dashboard/components/supplierAssessment.vue @@ -4,9 +4,9 @@ 供应商年度考核统计 -
+
- + for (var i = 0; i < res.data.length; i++) { + seriesData.forEach((item) => { + if (item.name in res.data[i]) { + item.data.push(res.data[i][item.name]); + } + }); + } + this.seriesData = seriesData.slice(0, 5).map((item) => { + return { + ...item, + type: "bar", + }; + }); + this.xAxisData = seriesData[5].data; + this.yAxisData = [ + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + axisLine: { + show: false, + }, + splitLine: { + //多条横线 + show: true, + }, + interval: 20, + }, + { + type: "value", + show: true, + axisLabel: { + formatter: "{value}", + fontSize: 12, + color: "#000", + }, + splitLine: { + //多条横线 + show: true, + }, + axisLine: { + show: false, + }, + interval: 20, + }, + ]; + this.legend = legend.slice(0,5); + }); + }, + }, + watch: { + value(newVal) { + this.fetchChartData(); + }, + }, +}; + \ No newline at end of file +} + \ No newline at end of file diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue index 40aff19..978600e 100644 --- a/src/views/dashboard/components/supplierList.vue +++ b/src/views/dashboard/components/supplierList.vue @@ -61,7 +61,6 @@ fetchData() { // 供应商注册、审核通过、注册设备数量 getSupplierCount().then((res) => { - console.log(res.data, '供应商注册、审核通过、注册设备数量') for (var i = 0; i < this.device.length; i++) { for (var device in res.data) { if(this.device[i].type === device) { diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue index d112e20..5d85a68 100644 --- a/src/views/dashboard/components/supplierStatus.vue +++ b/src/views/dashboard/components/supplierStatus.vue @@ -6,7 +6,7 @@
- +
@@ -37,42 +37,44 @@ return { seriesData: [], indicator: [], + title:'' }; }, mounted() { - // this.fetchData(); //真实获取数据，后期接口完成直接使用 - setTimeout(() => { - // 模拟数据后期注释掉 - let data = [ - { - status: "1", - statusName: "审核通过", - supplierCount: 70, - }, - { - status: "2", - statusName: "审核中", - supplierCount: 30, - }, - { - status: "3", - statusName: "审核不通过", - supplierCount: 20, - }, - ]; - this.seriesData = data.map((item) => { - return { - value: item.supplierCount, - name: item.statusName, - }; - }); - this.indicator = data.map((item) => { - return { - name: item.statusName, - max: item.supplierCount + 10, - }; - }); - }, 2000); + this.fetchData(); //真实获取数据，后期接口完成直接使用 + // setTimeout(() => { + // // 模拟数据后期注释掉 + // let data = [ + // { + // status: "1", + // statusName: "审核通过", + // supplierCount: 70, + // }, + // { + // status: "2", + // statusName: "审核中", + // supplierCount: 30, + // }, + // { + // status: "3", + // statusName: "审核不通过", + // supplierCount: 20, + // }, + // ]; + // this.seriesData = data.map((item) => { + // return { + // value: item.supplierCount, + // name: item.statusName, + // }; + // }); + // this.indicator = data.map((item) => { + // return { + // name: item.statusName, + // max: item.supplierCount + 10, + // }; + // }); + // this.title = `总\n\n50` + // }, 2000); }, methods: { fetchData() { @@ -89,6 +91,11 @@ max: item.supplierCount + 10, }; }); + let arr =[] + res.data.forEach(element => { + arr.push(element.supplierCount) + }); + this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}` }); }, }, diff --git a/src/views/dashboard/components/switch.vue b/src/views/dashboard/components/switch.vue index f373cab..43ef875 100644 --- a/src/views/dashboard/components/switch.vue +++ b/src/views/dashboard/components/switch.vue @@ -55,9 +55,14 @@