diff --git a/public/img/bidata/leijijiedai.png b/public/img/bidata/leijijiedai.png new file mode 100644 index 0000000..bdff994 Binary files /dev/null and b/public/img/bidata/leijijiedai.png differ diff --git a/src/api/modules/http.js b/src/api/modules/http.js index 06438f2..18f36c0 100644 --- a/src/api/modules/http.js +++ b/src/api/modules/http.js @@ -1446,6 +1446,36 @@ export function biCusAgentRelationDistribute(data) { }) } + +// 设备监控中心 +export function bieQuipmentMonitoringCenter(data) { + return request({ + url: 'autoSR/biData/equipmentMonitoringCenter', + method: 'post', + data + }) +} + + +// 设备监控中心左 +export function biEquipmentMonitoringLeft(data) { + return request({ + url: 'autoSR/biData/equipmentMonitoringLeft', + method: 'post', + data + }) +} + +// 设备监控中心左 +export function biEquipmentMonitoringRight(data) { + return request({ + url: 'autoSR/biData/equipmentMonitoringRight', + method: 'post', + data + }) +} + + // 预警提醒 export function biWarningList(params) { return request({ diff --git a/src/page/bi/bi.vue b/src/page/bi/bi.vue index 071c758..0d61a77 100644 --- a/src/page/bi/bi.vue +++ b/src/page/bi/bi.vue @@ -87,6 +87,7 @@ v-if=" showSelect('接待分析') || showSelect('销讲执行分布') || + showSelect('设备监控中心') || showSelect('违禁预警') " > @@ -423,8 +424,8 @@
-
+
+ +
+ +
+
+ +
+
+ +
在线率
+
+
+
+ 设备总数：{{ + equipmentOnlineAnalyse.allCount || 0 + }} +
+
+ 在线设备：{{ + equipmentOnlineAnalyse.onlineCount || 0 + }} +
+
+ 在线率：{{ equipmentOnlineAnalyse.onlineCountRate || 0 }}% +
+
+
+
+ +
+ +
+
+ +
活跃项目率
+
+
+
+ 项目总数：{{ + activeProjectAnalyse.allProject || 0 + }} +
+
+ 活跃项目：{{ + activeProjectAnalyse.activeProject || 0 + }} +
+
+ 活跃项目率：{{ activeProjectAnalyse.activeProjectRate || 0 }}% +
+
+
+
+ +
+ +
+
+ +
+ +
+ + + + + + + +
+
+
+ + +
+ +
+

待处理

+
+
+
+ {{ data.data || 0 }} +
+
{{ data.title }}
+
+
+
+ +
+ + + +
+ + 接待量 +
+ {{ receptionCounts }} + 次 +
+
+ +
+
+
+ {{ data.data || 0 }} +
+
+ {{ data.title }} + +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+ + +
+
+ +
+
+ +
录音完整率
+
+
+
+ 接待总数：{{ + equipmentOnlineAnalyse.allCount || 0 + }} +
+
+ 完整录音：{{ + equipmentOnlineAnalyse.onlineCount || 0 + }} +
+
+ 录音完整率：{{ equipmentOnlineAnalyse.onlineCountRate || 0 }}% +
+
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+
+
+ -
+
{ - if (res.code == 10000) { - this.biWarningMessageIndex = res.data.records.map((item) => { - return { - ...item, - selectValue: [], - }; - }); - this.totals = res.data.total; - } + arr1.forEach((item, index) => { + let par = { + // 折线图的样式 + smooth: true, + name: item.name, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(index), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(index), + }, + }, + }, + data: [], + }; + this.fullRecordTendency.forEach((org) => { + par.data.push(org[item.params] || 0); + if (!obj1.xAxis.includes(org.date.split(" ")[0])) { + obj1.xAxis.push(org.date.split(" ")[0]); + } + + if (!obj1.legend.includes(item.name)) { + obj1.legend.push(item.name); + } + }); + this.receptionList.push(par); }); - }, - // 展示项目预警列表 - showBiWarningList() { - this.tableNameList = dialogConstList.earlyWarningTable; - this.biWarningList(); - }, + obj1.series = this.receptionList; + console.log(obj1, "这里是"); - // 围巾预警 - biWarningList() { + this.$nextTick(() => { + this.creatLine(obj1); + }); + + }, + // 设备监控中心左 + biEquipmentMonitoringLeft() { const params = { - orgType: localStorage.getItem("orgType") || "", - agentId: localStorage.getItem("agentId") || "", - current: this.current, - size: this.size, + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + houseId: this.projectValue, }; - this.$api.http.biWarningList(params).then((res) => { + this.$api.http.biEquipmentMonitoringLeft(params).then((res) => { if (res.code == 10000) { - this.tableData = res.data.records; - this.total = res.data.total; - if (!this.dialogVisible) { - this.dialogVisible = true; - this.dialogTitle = "项目列表"; - } + this.equipmentOnlineAnalyse = res.data.equipmentOnlineAnalyse; + this.overdueProject = res.data.overdueProject.splice(0, 7) || []; + this.projectAnalyse = res.data.projectAnalyse; + this.activeProjectAnalyse = res.data.activeProjectAnalyse; + + this.$nextTick(() => { + this.buildingPie(); + }); } }); }, - // 接待分析 - initReceptionAnalysis() { - this.biTopStatisticData(); - this.biFindHouseByOrgCode(); - this.biTendencyDataContrast(); - this.biReceptionDetail(); - }, - - // 销讲执行分布 - initSalesExecutionDistribution() { - this.biTopStatisticData(); - this.biFindHouseByOrgCode(); - this.biCusAgentRelationDistribute(); - }, - - // 销讲执行分布 - biCusAgentRelationDistribute() { - // 接口入参 + // 设备监控中心右 + biEquipmentMonitoringRight() { const params = { dateType: this.dateSelectIndex, orgCode: this.companyValue, @@ -1200,187 +1506,181 @@ export default { endDate: this.time[1] || "", houseId: this.projectValue, }; - this.$api.http.biCusAgentRelationDistribute(params).then((res) => { + this.$api.http.biEquipmentMonitoringRight(params).then((res) => { if (res.code == 10000) { - this.allSalesExecutionDistri = res.data; - this.formatAllSalesExecutionDistri(); // 格式化数据 + this.fullRecordAnalyse = res.data.fullRecordAnalyse || {}; + this.fullRecordTendency = res.data.fullRecordTendency || []; + this.notFullRecordDistribute = res.data.notFullRecordDistribute || []; + this.offLineReasonDistribute = res.data.offLineReasonDistribute || []; + + this.$nextTick(() => { + this.buildNotFull(); + this.buildOffLine(); + this.formatLineDatasLine() + }); } }); }, - // 格式化销讲执行分布 - formatAllSalesExecutionDistri() { - this.SalesExecutionDistributionIndex.forEach((list) => { - if (list.params == "visitReceptionDistribute") { - let gentle = 0; - let [arr1, arr2] = [[], []]; - this.allSalesExecutionDistri.visitReceptionDistribute.forEach( - (item) => { - if (item.name != "首次到访") { - gentle += item.value; - } else { - arr1.push(item); - } - arr2.push(item); - } - ); - let series = [ - { - name: "到访次数分布", - type: "pie", - selectedMode: "single", - radius: [0, "30%"], - label: { - position: "inner", - fontSize: 14, - }, - labelLine: { - show: false, - }, - data: arr1, - }, - { - name: "到访次数分布", - type: "pie", - radius: ["45%", "60%"], - labelLine: { - length: 30, - }, - data: arr2, + buildOffLine() { + let legends = this.offLineReasonDistribute.map((item) => { + return item.name; + }); + this.creatPie({ + id: "offLineReasonDistribute", + grid: { + bottom: "20%", + top: "5%", + }, + legend: { + legend: legends, + show: true, + orient: "horizontal", + type: "scroll", + bottom: "5%", + textStyle: { + color: "#fff", + }, + }, + series: [ + { + name: "项目服务期分析", + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 5, + showAbove: true, }, - ]; - if (series[0].data.length > 0) { - series[0].data.push({ - name: "复访接待", - value: gentle, - }); - } - this.$nextTick(() => { - this.creatPie({ - id: `${list.params}SalesExecutionDistributionIndex`, - legend: { - show: false, - }, - series: series, - }); - }); - } else { - let legend = this.allSalesExecutionDistri[list.params].map((item) => { - return item.name; - }); - this.$nextTick(() => { - this.creatPie({ - id: `${list.params}SalesExecutionDistributionIndex`, - grid: { - bottom: "20%", - top: "5%", - }, - legend: { - legend: legend, - show: list.legend ? true : false, - orient: "horizontal", - type: "scroll", - bottom: "5%", - textStyle: { - color: "#fff", + minAngle: 5, + avoidLabelOverlap: true, + data: this.offLineReasonDistribute, + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; }, }, - series: [ - { - name: list.title, - type: "pie", - radius: "50%", - labelLine: { - length: 5, - showAbove: true, - }, - minAngle: 5, - avoidLabelOverlap: true, - data: this.allSalesExecutionDistri[list.params], - itemStyle: { - normal: { - color: function (colors) { - var colorList = [ - "#D0444D", - "#376FE3", - "#E1B31F", - "#8D25E4", - "#DF7323", - "#2ED1EE", - ]; - return colorList[colors.dataIndex % 6]; - }, - }, - }, - }, - ], - }); - }); - } + }, + }, + ], }); }, - // 接待分析 --> 选中下标修改 - changeIndicatorOptions(params, index, events) { - this[params] = index; - this[events](); - }, - - // 获取名称 - getName(value) { - let str = ""; - switch (value) { - case "recording": - str = "无录音"; - break; - case "tagCustomer": - str = "标记无效"; - break; - case "prohibitedCustomer": - str = "违禁接待"; - break; - case "normalReception": - str = "正常接待"; - break; - case "activeCustomer": - str = "有效接待"; - break; - case "invalidCount": - str = "无效接待"; - break; - default: - str = ""; - break; - } - return str; + buildNotFull() { + let legend = this.notFullRecordDistribute.map((item) => { + return item.name; + }); + this.creatPie({ + id: "notFullRecordDistribute", + grid: { + bottom: "20%", + top: "5%", + }, + legend: { + legend: legend, + show: true, + orient: "horizontal", + type: "scroll", + bottom: "5%", + textStyle: { + color: "#fff", + }, + }, + series: [ + { + name: "项目服务期分析", + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 5, + showAbove: true, + }, + minAngle: 5, + avoidLabelOverlap: true, + data: this.notFullRecordDistribute, + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; + }, + }, + }, + }, + ], + }); }, - // 修改已读未读状态 - biWarningUpdateShowStatus(data) { - if (data.selectValue.length == 0) { - this.$message.error("请选择已了解的消息"); - return; - } - this.$api.http - .biWarningUpdateShowStatus({ - ids: data.selectValue.join(","), - }) - .then((res) => { - console.log(res); - if (res.code == 10000) { - data.list.forEach((item) => { - item.showStatus = 0; - }); - this.$message.success(res.message); - } else { - this.$message.error(res.message); - } - }); + // 服务项目分析 + buildingPie() { + let legend = this.projectAnalyse.map((item) => { + return item.name; + }); + this.creatPie({ + id: "projectAnalyse", + grid: { + bottom: "20%", + top: "5%", + }, + legend: { + legend: legend, + show: true, + orient: "horizontal", + type: "scroll", + bottom: "5%", + textStyle: { + color: "#fff", + }, + }, + series: [ + { + name: "项目服务期分析", + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 5, + showAbove: true, + }, + minAngle: 5, + avoidLabelOverlap: true, + data: this.projectAnalyse, + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; + }, + }, + }, + }, + ], + }); }, - // 接待质量趋势&销讲质量分布 - biReceptionDetail() { - // 接口入参 + // 设备监控中心 + bieQuipmentMonitoringCenter() { const params = { dateType: this.dateSelectIndex, orgCode: this.companyValue, @@ -1388,612 +1688,630 @@ export default { endDate: this.time[1] || "", houseId: this.projectValue, }; - - this.$api.http.biReceptionDetail(params).then((res) => { + this.$api.http.bieQuipmentMonitoringCenter(params).then((res) => { if (res.code == 10000) { - this.formatReceptionQualityTrends(res.data.tendencyData); - this.formatMarketingMassDistribution(res.data.distributeData); + this.equipmentMonitoringCenter = res.data.tendencyData; + console.log(res); + this.receptionCounts = res.data.receptionCount || 0; + // 赋值待处理 正在接待 + this.jiedaiLists.forEach((item) => { + item.data = res.data[item.params]; + }); + this.stayHandleLists.forEach((item) => { + item.data = res.data[item.params]; + }); + this.formatLineDatas(); } }); }, - // 格式化接待质量趋势 - formatReceptionQualityTrends(res) { - const list = [ - { - title: "有效接待", - params: "activeCustomer", - }, - { - title: "标记无效", - params: "tagCustomer", - }, + // 处理折线统计图的数据 + formatLineDatas() { + let arr1 = [ { - title: "无录音", - params: "recording", + name: "录音开启率", + params: "recordOpenRate", }, ]; - - let obj = { - id: "initReceptionAnalysisReceptionQualityTrends", + let obj1 = { + id: "RecordingOpeningRateTrend", xAxis: [], + legend: [], series: [], - legend: { - show: true, - data: [], - bottom: "0", - right: "center", - orient: "horizontal", // 图例列表的布局朝向; horizontal; vertical - icon: "circle", - left: "center", // 距离容器侧边距离 - textStyle: { - color: "#fff", - fontSize: 12, - }, - }, - color: [ - new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#FF7B96", - }, - { - offset: 1, - color: "#FA3E63", - }, - ], - false - ), - new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#FAB519", - }, - { - offset: 1, - color: "#FC6128", - }, - ], - false - ), - new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "#4C83FF", - }, - { - offset: 1, - color: "#2AFADF", - }, - ], - false - ), - ], - grid: { - left: "3%", - right: "4%", - bottom: "10%", - containLabel: true, - }, + max: 100, }; - list.forEach((item, index) => { - obj.legend.data.push(item.title); - let objChild = { - type: "bar", - barMaxWidth: "20%", - name: item.title, - stack: "total", + arr1.forEach((item, index) => { + let par = { + // 折线图的样式 + smooth: true, + name: item.name, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(index), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(index), + }, + }, + }, data: [], }; - res.forEach((key) => { - if (!obj.xAxis.includes(key.startDate)) { - obj.xAxis.push(key.startDate); + this.equipmentMonitoringCenter.forEach((org) => { + par.data.push(org[item.params] || 0); + + obj1.xAxis.push(org.date); + + if (!obj1.legend.includes(item.name)) { + obj1.legend.push(item.name); } - objChild.data.push(key[item.params]); }); - obj.series.push(objChild); - }); - console.log(obj); - this.$nextTick(() => { - this.creatBar(obj); + this.receptionList.push(par); }); - }, + let arr2 = [ + { + name: "平均开启时长", + params: "openActionTime", + }, + ]; - // 格式化销讲质量分布 - formatMarketingMassDistribution(res) { - let [arr1, arr2] = [[], []]; - for (const [key, value] of Object.entries(res)) { - if (key != "activeCustomer" && key != "invalidCount") { - arr1.push({ - name: this.getName(key), - value: value, - }); - } else { - arr2.push({ - name: this.getName(key), - value: value, - }); - } - } + let obj2 = { + id: "AverageOpeningTime", + xAxis: [], + legend: [], + series: [], + }; - let series = [ - { - name: "销讲质量分布", - type: "pie", - selectedMode: "single", - radius: [0, "30%"], - label: { - position: "inner", - fontSize: 14, - }, - labelLine: { - show: false, - }, - data: arr2, - minAngle: 5, - itemStyle: { + arr2.forEach((item, index) => { + let par = { + // 折线图的样式 + smooth: true, + name: item.name, + type: "line", + areaStyle: { normal: { - color: function (colors) { - var colorList = [ - "#D0444D", - "#376FE3", - "#E1B31F", - "#8D25E4", - "#DF7323", - "#2ED1EE", - ]; - return colorList[colors.dataIndex % 6]; - }, + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(index), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, }, }, - }, - { - name: "销讲质量分布", - type: "pie", - radius: ["45%", "60%"], - labelLine: { - length: 30, - }, - data: arr1, - minAngle: 5, itemStyle: { normal: { - color: function (colors) { - var colorList = [ - "#D0444D", - "#376FE3", - "#E1B31F", - "#8D25E4", - "#DF7323", - "#2ED1EE", - ]; - return colorList[colors.dataIndex % 6]; + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(index), }, }, }, - }, - ]; - this.$nextTick(() => { - this.creatPie({ - id: "initReceptionAnalysisMarketingMassDistribution", - legend: { - show: false, - }, - series: series, + data: [], + }; + + this.equipmentMonitoringCenter.forEach((org) => { + par.data.push(org[item.params] || 0); + + obj2.xAxis.push(org.date); + + if (!obj2.legend.includes(item.name)) { + obj2.legend.push(item.name); + } }); + + this.salesExecution.push(par); + }); + + obj1.series = this.receptionList; + obj2.series = this.salesExecution; + console.log(obj1, "这里是"); + + this.$nextTick(() => { + this.creatLine(obj1); + this.creatLine(obj2); }); + }, - // 接待分析 - biTendencyDataContrast() { - // 接口入参 + // 违禁预警消息列表 + biWarningMessageList() { const params = { - dateType: this.dateSelectIndex, - orgCode: this.companyValue, - startDate: this.time[0] || "", - endDate: this.time[1] || "", + orgType: localStorage.getItem("orgType") || "", + agentId: localStorage.getItem("agentId") || "", houseId: this.projectValue, + current: this.currents, + size: this.sizes, }; - this.$api.http.biTendencyDataContrast(params).then((res) => { + this.$api.http.biWarningMessageList(params).then((res) => { if (res.code == 10000) { - this.allTrendData = res.data; - this.formatTendency(this.allTrendData); // 格式化数据 - - this.formatReception(); - this.formatSalesExecution(); + this.biWarningMessageIndex = res.data.records.map((item) => { + return { + ...item, + selectValue: [], + }; + }); + this.totals = res.data.total; } }); }, - // 格式化销讲趋势接待趋势 - formatReception() { - let res = this.allTrendData; - // 平均接待时长 - let options3 = { - id: "ReceptionTrendsBtm", - xAxis: [], // x坐标轴 - legend: [], - returnA: [], - returnB: [], - series: [], + // 展示项目预警列表 + showBiWarningList() { + this.tableNameList = dialogConstList.earlyWarningTable; + this.biWarningList(); + }, - grid: { - top: "10%", - bottom: "25%", - right: "5%", - left: "7%", - }, + // 围巾预警 + biWarningList() { + const params = { + orgType: localStorage.getItem("orgType") || "", + agentId: localStorage.getItem("agentId") || "", + current: this.current, + size: this.size, }; - - let nameA = `${res.tendencyData[0].statDate.split(" ")[0]}~${ - res.tendencyData[res.tendencyData.length - 1].statDate.split(" ")[0] - }`; - - let nameB = `${res.tendencyDataContrast[0].statDate.split(" ")[0]}~${ - res.tendencyDataContrast[ - res.tendencyDataContrast.length - 1 - ].statDate.split(" ")[0] - }`; - - // 获取对比纬度的数据名称 - let getNames = - this.ReceptionTrendsList[this.ReceptionTrendsListIndex].params; - - // 选中时间的数据 - res.tendencyData.forEach((item) => { - options3.xAxis.push(item.statDate.split(" ")[0]); - // 平均接待时长 - options3.returnA.push(item[getNames] || 0); - }); - - // 对比数据 - res.tendencyDataContrast.forEach((item) => { - options3.returnB.push(item[getNames] || 0); + this.$api.http.biWarningList(params).then((res) => { + if (res.code == 10000) { + this.tableData = res.data.records; + this.total = res.data.total; + if (!this.dialogVisible) { + this.dialogVisible = true; + this.dialogTitle = "项目列表"; + } + } }); - options3.legend = [nameA, nameB]; - - let objs1 = { - // 折线图的样式 - smooth: true, - name: nameA, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(0), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(0), - }, - }, - }, - data: options3.returnA, - }; + }, - let objs2 = { - // 折线图的样式 - smooth: true, - name: nameB, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(1), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(1), - }, - }, - }, - data: options3.returnB, - }; + // 接待分析 + initReceptionAnalysis() { + this.biTopStatisticData(); + this.biFindHouseByOrgCode(); + this.biTendencyDataContrast(); + this.biReceptionDetail(); + }, - options3.series = [objs1, objs2]; - this.$nextTick(() => { - this.creatLine(options3); - }); + // 销讲执行分布 + initSalesExecutionDistribution() { + this.biTopStatisticData(); + this.biFindHouseByOrgCode(); + this.biCusAgentRelationDistribute(); }, - // 格式化销讲趋势接待趋势 - formatSalesExecution() { - let res = this.allTrendData; - // 平均接待时长 - let options3 = { - id: "SalesExecutionTrendsBtm", - xAxis: [], // x坐标轴 - legend: [], - returnA: [], - returnB: [], - series: [], - grid: { - top: "10%", - bottom: "25%", - right: "5%", - left: "7%", - }, + // 销讲执行分布 + biCusAgentRelationDistribute() { + // 接口入参 + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + houseId: this.projectValue, }; - - let nameA = `${res.tendencyData[0].statDate.split(" ")[0]}~${ - res.tendencyData[res.tendencyData.length - 1].statDate.split(" ")[0] - }`; - - let nameB = `${res.tendencyDataContrast[0].statDate.split(" ")[0]}~${ - res.tendencyDataContrast[ - res.tendencyDataContrast.length - 1 - ].statDate.split(" ")[0] - }`; - - // 获取对比纬度的数据名称 - let getNames = - this.ReceptionTrendsList[this.ReceptionTrendsListIndex].params; - - // 选中时间的数据 - res.tendencyData.forEach((item) => { - options3.xAxis.push(item.statDate.split(" ")[0]); - // 平均接待时长 - options3.returnA.push(item[getNames] || 0); - }); - - // 对比数据 - res.tendencyDataContrast.forEach((item) => { - options3.returnB.push(item[getNames] || 0); + this.$api.http.biCusAgentRelationDistribute(params).then((res) => { + if (res.code == 10000) { + this.allSalesExecutionDistri = res.data; + this.formatAllSalesExecutionDistri(); // 格式化数据 + } }); - options3.legend = [nameA, nameB]; - - let objs1 = { - // 折线图的样式 - smooth: true, - name: nameA, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(0), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(0), - }, - }, - }, - data: options3.returnA, - }; + }, - let objs2 = { - // 折线图的样式 - smooth: true, - name: nameB, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(1), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(1), + // 格式化销讲执行分布 + formatAllSalesExecutionDistri() { + this.SalesExecutionDistributionIndex.forEach((list) => { + if (list.params == "visitReceptionDistribute") { + let gentle = 0; + let [arr1, arr2] = [[], []]; + this.allSalesExecutionDistri.visitReceptionDistribute.forEach( + (item) => { + if (item.name != "首次到访") { + gentle += item.value; + } else { + arr1.push(item); + } + arr2.push(item); + } + ); + let series = [ + { + name: "到访次数分布", + type: "pie", + selectedMode: "single", + radius: [0, "30%"], + label: { + position: "inner", + fontSize: 14, + }, + labelLine: { + show: false, + }, + data: arr1, }, - }, - }, - data: options3.returnB, - }; - - options3.series = [objs1, objs2]; - this.$nextTick(() => { - this.creatLine(options3); + { + name: "到访次数分布", + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 30, + }, + data: arr2, + }, + ]; + if (series[0].data.length > 0) { + series[0].data.push({ + name: "复访接待", + value: gentle, + }); + } + this.$nextTick(() => { + this.creatPie({ + id: `${list.params}SalesExecutionDistributionIndex`, + legend: { + show: false, + }, + series: series, + }); + }); + } else { + let legend = this.allSalesExecutionDistri[list.params].map((item) => { + return item.name; + }); + this.$nextTick(() => { + this.creatPie({ + id: `${list.params}SalesExecutionDistributionIndex`, + grid: { + bottom: "20%", + top: "5%", + }, + legend: { + legend: legend, + show: list.legend ? true : false, + orient: "horizontal", + type: "scroll", + bottom: "5%", + textStyle: { + color: "#fff", + }, + }, + series: [ + { + name: list.title, + type: "pie", + radius: "50%", + labelLine: { + length: 5, + showAbove: true, + }, + minAngle: 5, + avoidLabelOverlap: true, + data: this.allSalesExecutionDistri[list.params], + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; + }, + }, + }, + }, + ], + }); + }); + } }); }, - // 格式化平均接待时长 - formatTendency(res) { - // 平均接待时长 - let options3 = { - id: "initReceptionAnalysisAverageReceptionDuration", - xAxis: [], // x坐标轴 - legend: [], - returnA: [], - returnB: [], - series: [], - - grid: { - top: "10%", - bottom: "25%", - right: "5%", - left: "7%", - }, - }; + // 接待分析 --> 选中下标修改 + changeIndicatorOptions(params, index, events) { + this[params] = index; + this[events](); + }, - let nameA = `${res.tendencyData[0].statDate.split(" ")[0]}~${ - res.tendencyData[res.tendencyData.length - 1].statDate.split(" ")[0] - }`; + // 获取名称 + getName(value) { + let str = ""; + switch (value) { + case "recording": + str = "无录音"; + break; + case "tagCustomer": + str = "标记无效"; + break; + case "prohibitedCustomer": + str = "违禁接待"; + break; + case "normalReception": + str = "正常接待"; + break; + case "activeCustomer": + str = "有效接待"; + break; + case "invalidCount": + str = "无效接待"; + break; + default: + str = ""; + break; + } + return str; + }, - let nameB = `${res.tendencyDataContrast[0].statDate.split(" ")[0]}~${ - res.tendencyDataContrast[ - res.tendencyDataContrast.length - 1 - ].statDate.split(" ")[0] - }`; + // 修改已读未读状态 + biWarningUpdateShowStatus(data) { + if (data.selectValue.length == 0) { + this.$message.error("请选择已了解的消息"); + return; + } + this.$api.http + .biWarningUpdateShowStatus({ + ids: data.selectValue.join(","), + }) + .then((res) => { + console.log(res); + if (res.code == 10000) { + data.list.forEach((item) => { + item.showStatus = 0; + }); + this.$message.success(res.message); + } else { + this.$message.error(res.message); + } + }); + }, - // 选中时间的数据 - res.tendencyData.forEach((item) => { - options3.xAxis.push(item.statDate.split(" ")[0]); - // 平均接待时长 - options3.returnA.push(item.avgDuration || 0); - }); + // 接待质量趋势&销讲质量分布 + biReceptionDetail() { + // 接口入参 + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + houseId: this.projectValue, + }; - // 对比数据 - res.tendencyDataContrast.forEach((item) => { - options3.returnB.push(item.avgDuration || 0); + this.$api.http.biReceptionDetail(params).then((res) => { + if (res.code == 10000) { + this.formatReceptionQualityTrends(res.data.tendencyData); + this.formatMarketingMassDistribution(res.data.distributeData); + } }); - options3.legend = [nameA, nameB]; + }, - let objs1 = { - // 折线图的样式 - smooth: true, - name: nameA, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(0), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, + // 格式化接待质量趋势 + formatReceptionQualityTrends(res) { + const list = [ + { + title: "有效接待", + params: "activeCustomer", }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(0), - }, - }, + { + title: "标记无效", + params: "tagCustomer", }, - data: options3.returnA, - }; + { + title: "无录音", + params: "recording", + }, + ]; - let objs2 = { - // 折线图的样式 - smooth: true, - name: nameB, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(1), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, + let obj = { + id: "initReceptionAnalysisReceptionQualityTrends", + xAxis: [], + series: [], + legend: { + show: true, + data: [], + bottom: "0", + right: "center", + orient: "horizontal", // 图例列表的布局朝向; horizontal; vertical + icon: "circle", + left: "center", // 距离容器侧边距离 + textStyle: { + color: "#fff", + fontSize: 12, }, }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(1), - }, - }, + color: [ + new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#FF7B96", + }, + { + offset: 1, + color: "#FA3E63", + }, + ], + false + ), + new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#FAB519", + }, + { + offset: 1, + color: "#FC6128", + }, + ], + false + ), + new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#4C83FF", + }, + { + offset: 1, + color: "#2AFADF", + }, + ], + false + ), + ], + grid: { + left: "3%", + right: "4%", + bottom: "10%", + containLabel: true, }, - data: options3.returnB, }; - - options3.series = [objs1, objs2]; + list.forEach((item, index) => { + obj.legend.data.push(item.title); + let objChild = { + type: "bar", + barMaxWidth: "20%", + name: item.title, + stack: "total", + data: [], + }; + res.forEach((key) => { + if (!obj.xAxis.includes(key.startDate)) { + obj.xAxis.push(key.startDate); + } + objChild.data.push(key[item.params]); + }); + obj.series.push(objChild); + }); + console.log(obj); this.$nextTick(() => { - this.creatLine(options3); + this.creatBar(obj); }); }, - // 获取公司列表 - biFindHouseByOrgCode() { - const params = { - orgCode: this.companyValue, - }; - if (this.headIndex == "违禁预警") { - params.orgCode = localStorage.getItem("orgCode"); - } - this.$api.http.biFindHouseByOrgCode(params).then((res) => { - if (res.code == 10000) { - this.projectOptions = res.data; + // 格式化销讲质量分布 + formatMarketingMassDistribution(res) { + let [arr1, arr2] = [[], []]; + for (const [key, value] of Object.entries(res)) { + if (key != "activeCustomer" && key != "invalidCount") { + arr1.push({ + name: this.getName(key), + value: value, + }); + } else { + arr2.push({ + name: this.getName(key), + value: value, + }); } + } + + let series = [ + { + name: "销讲质量分布", + type: "pie", + selectedMode: "single", + radius: [0, "30%"], + label: { + position: "inner", + fontSize: 14, + }, + labelLine: { + show: false, + }, + data: arr2, + minAngle: 5, + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; + }, + }, + }, + }, + { + name: "销讲质量分布", + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 30, + }, + data: arr1, + minAngle: 5, + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; + }, + }, + }, + }, + ]; + this.$nextTick(() => { + this.creatPie({ + id: "initReceptionAnalysisMarketingMassDistribution", + legend: { + show: false, + }, + series: series, + }); }); }, - // 案场排名顶部对比数据 - biTopStatisticData() { + // 接待分析 + biTendencyDataContrast() { // 接口入参 const params = { dateType: this.dateSelectIndex, @@ -2002,1220 +2320,1938 @@ export default { endDate: this.time[1] || "", houseId: this.projectValue, }; - this.$api.http.biTopStatisticData(params).then((res) => { + this.$api.http.biTendencyDataContrast(params).then((res) => { if (res.code == 10000) { - this.caseRankingList.forEach((item) => { - item.resultA = res.data.resultA[item.params]; - item.resultB = res.data.resultB[item.params]; - }); + this.allTrendData = res.data; + this.formatTendency(this.allTrendData); // 格式化数据 + + this.formatReception(); + this.formatSalesExecution(); } }); }, - // 获取案场详情柱状图数据 - biRankingData() { - const params = { - dateType: this.dateSelectIndex, - orgCode: this.companyValue, - startDate: this.time[0] || "", - endDate: this.time[1] || "", - orderBy: this.orderBy, // 1 前10，2 后10 - dimensionType: this.dimensionType, //1 项目，2 城市，3 区域 + // 格式化销讲趋势接待趋势 + formatReception() { + let res = this.allTrendData; + // 平均接待时长 + let options3 = { + id: "ReceptionTrendsBtm", + xAxis: [], // x坐标轴 + legend: [], + returnA: [], + returnB: [], + series: [], + + grid: { + top: "10%", + bottom: "25%", + right: "5%", + left: "7%", + }, }; - this.$api.http.biRankingData(params).then((res) => { - if (res.code == 10000) { - this.rankingEchartsBarList.forEach((ob) => { - let object = res.data[ob.params]; - console.log(object, ob.params); - let xAxis = object.data.map((item) => { - return item.name; - }); - let avgList = []; - let yAxis = {}; - if (this.companyValue) { - avgList.push({ - yAxis: object.companyAvg, - name: "集团平均", - }); - try { - if ( - object.data[this.orderBy == 1 ? 0 : object.data.length - 1] - .value < object.companyAvg - ) { - yAxis.max = object.companyAvg; - } - } catch (e) { - console.log(e); - } - } else { - // avgList.push({ - // yAxis: object.allAvg, - // name: "行业平均", - // }); - // try { - // if ( - // object.data[this.orderBy == 1 ? 0 : object.data.length - 1] - // .value < object.allAvg - // ) { - // yAxis.max = object.allAvg; - // } - // } catch (e) { - // console.log(e); - // } - } - if (ob.unit == "%") { - yAxis = { - max: 100, - }; - } - this.$nextTick(() => { - this.creatBar({ - id: ob.params, - xAxis: xAxis, - yAxis: yAxis, - series: [ - { - type: "bar", - barMaxWidth: "20%", - name: ob.title, - data: object.data || [], - itemStyle: { - normal: { - //柱体的颜色 - //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 - color: function (params) { - let colorList = [ - ["#FF7B96", "#FA3E63"], - ["#FC6128", "#FAB519"], - ["#FBE695", "#FFC536"], - ["#4C83FF", "#2AFADF"], - ]; + let nameA = `${res.tendencyData[0].statDate.split(" ")[0]}~${ + res.tendencyData[res.tendencyData.length - 1].statDate.split(" ")[0] + }`; - let colorItem = - colorList[ - params.dataIndex > 2 ? 3 : params.dataIndex - ]; - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: colorItem[0], - }, - { - offset: 1, - color: colorItem[1], - }, - ], - false - ); - }, - }, - }, - markLine: { - symbol: ["none", "none"], // none为标线两端的样式为无，可更改 - lineStyle: { - normal: { - color: "#34DBFC", // 这儿设置安全基线颜色 - }, - }, - data: avgList, - label: { - show: true, - position: "end", - padding: [-13, -20, 15, -85], - formatter: (data) => { - return `${data.name}：${data.value}`; - }, - }, - }, - }, - ], - }); - }); - }); - } - }); - }, + let nameB = `${res.tendencyDataContrast[0].statDate.split(" ")[0]}~${ + res.tendencyDataContrast[ + res.tendencyDataContrast.length - 1 + ].statDate.split(" ")[0] + }`; - // 下划线 - tableRowClassName({ row, rowIndex }) { - if (rowIndex % 2 == 0) { - return "second"; - } - }, - // 弹窗关闭 - handleClose() { - this.dialogVisible = false; - this.current = 1; - this.size = 10; - }, + // 获取对比纬度的数据名称 + let getNames = + this.ReceptionTrendsList[this.ReceptionTrendsListIndex].params; - // 弹窗展示 - showDialog(data) { - this.showDialogData = data; - const params = { - dataType: data.dataType, - dateType: this.dateSelectIndex, - orgCode: this.companyValue, - startDate: this.time[0] || "", - endDate: this.time[1] || "", - current: this.current, - size: this.size, - }; - this.$api.http.biChooseDataTable(params).then((res) => { - if (res.code == 10000) { - let arr = [...this.stayHandleList, ...this.jiedaiList]; - let obj = arr.find((item) => item.title == data.title); - this.total = res.data.total; - this.dialogTitle = data.title; - this.tableNameList = dialogConstList[obj.tableListName]; - this.tableData = res.data.records; - this.dialogVisible = true; - } + // 选中时间的数据 + res.tendencyData.forEach((item) => { + options3.xAxis.push(item.statDate.split(" ")[0]); + // 平均接待时长 + options3.returnA.push(item[getNames] || 0); }); - }, - // 获取页面数据 - biDataOverview() { - const params = { - dateType: this.dateSelectIndex, - orgCode: this.companyValue, - startDate: this.time[0] || "", - endDate: this.time[1] || "", - }; - this.$api.http.biDataOverview(params).then((res) => { - if (res.code == 10000) { - this.receptionCount = res.data.statisticData.receptionCount || 0; - this.jiedaiList.forEach((item) => { - // 接待趋势 - item.data = res.data.statisticData[item.params] || 0; - }); - this.stayHandleList.forEach((item) => { - // 销讲趋势 - item.data = res.data.statisticData[item.params] || 0; - }); - } + // 对比数据 + res.tendencyDataContrast.forEach((item) => { + options3.returnB.push(item[getNames] || 0); }); - }, + options3.legend = [nameA, nameB]; - // 用户总览右侧菜单 - biDataOverviewDistribute() { - const params = { - dateType: this.dateSelectIndex, - orgCode: this.companyValue, - startDate: this.time[0] || "", - endDate: this.time[1] || "", + let objs1 = { + // 折线图的样式 + smooth: true, + name: nameA, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(0), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(0), + }, + }, + }, + data: options3.returnA, }; - this.$api.http.biDataOverviewDistribute(params).then((res) => { - if (res.code == 10000) { - //右侧菜单数据填充 - this.rsideDataList.forEach((item) => { - this[item.params] = res.data[item.params] || []; - }); - this.$nextTick(() => { - this.formatterPie(); - }); - } + let objs2 = { + // 折线图的样式 + smooth: true, + name: nameB, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(1), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(1), + }, + }, + }, + data: options3.returnB, + }; + + options3.series = [objs1, objs2]; + this.$nextTick(() => { + this.creatLine(options3); }); }, - // 用户总览左侧菜单饼图 - biDataOverviewTendency() { - const params = { - dateType: this.dateSelectIndex, - orgCode: this.companyValue, - startDate: this.time[0] || "", - endDate: this.time[1] || "", + // 格式化销讲趋势接待趋势 + formatSalesExecution() { + let res = this.allTrendData; + // 平均接待时长 + let options3 = { + id: "SalesExecutionTrendsBtm", + xAxis: [], // x坐标轴 + legend: [], + returnA: [], + returnB: [], + series: [], + grid: { + top: "10%", + bottom: "25%", + right: "5%", + left: "7%", + }, }; - this.$api.http.biDataOverviewTendency(params).then((res) => { - if (res.code == 10000) { - this.allRecSaleList = res.data.tendencyData || []; // 趋势图 - //左侧菜单数据填充 - this.lsideDataList.forEach((item) => { - this[item.params] = res.data[item.params] || []; - this[item.params1] = res.data[item.params1] || []; - }); + let nameA = `${res.tendencyData[0].statDate.split(" ")[0]}~${ + res.tendencyData[res.tendencyData.length - 1].statDate.split(" ")[0] + }`; - this.$nextTick(() => { - this.empityReceptionListSalesExecution(); - this.formatLineData(); - this.formatterBar(); - }); - } - }); - }, + let nameB = `${res.tendencyDataContrast[0].statDate.split(" ")[0]}~${ + res.tendencyDataContrast[ + res.tendencyDataContrast.length - 1 + ].statDate.split(" ")[0] + }`; - // 获取公司 - biGetOrgCodeList() { - this.$api.http.biGetOrgCodeList().then((res) => { - if (res.code == 10000) { - this.companyOptions = res.data; - } + // 获取对比纬度的数据名称 + let getNames = + this.ReceptionTrendsList[this.ReceptionTrendsListIndex].params; + + // 选中时间的数据 + res.tendencyData.forEach((item) => { + options3.xAxis.push(item.statDate.split(" ")[0]); + // 平均接待时长 + options3.returnA.push(item[getNames] || 0); }); - }, - // 清空存放的series变量 - empityReceptionListSalesExecution() { - this.receptionList = []; - this.salesExecution = []; - }, + // 对比数据 + res.tendencyDataContrast.forEach((item) => { + options3.returnB.push(item[getNames] || 0); + }); + options3.legend = [nameA, nameB]; - // 处理折线统计图的数据 - formatLineData() { - let arr1 = [ - { - name: "接待量", - params: "receptionCount", - }, - { - name: "有效接待", - params: "activeCustomer", + let objs1 = { + // 折线图的样式 + smooth: true, + name: nameA, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(0), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, }, - { - params: "prohibitedCustomer", - name: "违禁接待", + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(0), + }, + }, }, - ]; - let obj1 = { - id: "tendencyData1", - xAxis: [], - legend: [], - series: [], + data: options3.returnA, }; - arr1.forEach((item, index) => { - let par = { - // 折线图的样式 - smooth: true, - name: item.name, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(index), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, + + let objs2 = { + // 折线图的样式 + smooth: true, + name: nameB, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(1), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(index), - }, + }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(1), }, }, - data: [], - }; - this.allRecSaleList.forEach((org) => { - par.data.push(org[item.params] || 0); - - if (!obj1.xAxis.includes(org.statDate.split(" ")[0])) { - obj1.xAxis.push(org.statDate.split(" ")[0]); - } + }, + data: options3.returnB, + }; - if (!obj1.legend.includes(item.name)) { - obj1.legend.push(item.name); - } - }); - this.receptionList.push(par); + options3.series = [objs1, objs2]; + this.$nextTick(() => { + this.creatLine(options3); }); - let arr2 = [ - { - name: "平均销讲执行率", - params: "fraction", - }, - { - name: "平均挖掘执行率", - params: "wordFraction", - }, - { - name: "平均挖掘成功率", - params: "wordFinishFraction", - }, - ]; + }, - let obj2 = { - id: "tendencyData2", - xAxis: [], + // 格式化平均接待时长 + formatTendency(res) { + // 平均接待时长 + let options3 = { + id: "initReceptionAnalysisAverageReceptionDuration", + xAxis: [], // x坐标轴 legend: [], + returnA: [], + returnB: [], series: [], - max: 100, - }; - - arr2.forEach((item, index) => { - let par = { - // 折线图的样式 - smooth: true, - name: item.name, - type: "line", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 1, - 1, - this.lineColorLinear(index), - false - ), - shadowColor: "rgba(44,118,222, 0.1)", - shadowBlur: 10, - }, - }, - itemStyle: { - normal: { - color: { - type: "linear", // 线性渐变 - x: 0, - y: 0, - x2: 1, - y2: 1, - colorStops: this.lineColorLinear(index), - }, - }, - }, - data: [], - }; - this.allRecSaleList.forEach((org) => { - par.data.push(org[item.params] || 0); + grid: { + top: "10%", + bottom: "25%", + right: "5%", + left: "7%", + }, + }; - if (!obj2.xAxis.includes(org.statDate.split(" ")[0])) { - obj2.xAxis.push(org.statDate.split(" ")[0]); - } + let nameA = `${res.tendencyData[0].statDate.split(" ")[0]}~${ + res.tendencyData[res.tendencyData.length - 1].statDate.split(" ")[0] + }`; - if (!obj2.legend.includes(item.name)) { - obj2.legend.push(item.name); - } - }); + let nameB = `${res.tendencyDataContrast[0].statDate.split(" ")[0]}~${ + res.tendencyDataContrast[ + res.tendencyDataContrast.length - 1 + ].statDate.split(" ")[0] + }`; - this.salesExecution.push(par); + // 选中时间的数据 + res.tendencyData.forEach((item) => { + options3.xAxis.push(item.statDate.split(" ")[0]); + // 平均接待时长 + options3.returnA.push(item.avgDuration || 0); }); - obj1.series = this.receptionList; - obj2.series = this.salesExecution; - console.log(obj1, "这里是"); - - this.$nextTick(() => { - this.creatLine(obj1); - this.creatLine(obj2); + // 对比数据 + res.tendencyDataContrast.forEach((item) => { + options3.returnB.push(item.avgDuration || 0); }); - }, + options3.legend = [nameA, nameB]; - // 创建折线图 - creatLine(obj) { - // 基于准备好的dom，初始化echarts实例 - let myChart = echarts.init(document.getElementById(obj.id)); - myChart.clear(); - // this.receptionList - // 指定图表的配置项和数据 - let grid = { - top: "10%", - bottom: "25%", - right: "5%", - left: "15%", - }; - let option = { - legend: { - show: true, - bottom: "0", - right: "center", - orient: "horizontal", // 图例列表的布局朝向; horizontal; vertical - data: obj.legend, - icon: "circle", - left: "center", // 距离容器侧边距离 - textStyle: { - color: "#fff", - fontSize: 12, + let objs1 = { + // 折线图的样式 + smooth: true, + name: nameA, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(0), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, }, }, - - grid: obj.grid ? obj.grid : grid, - tooltip: { - trigger: "axis", - }, - xAxis: { - data: obj.xAxis, // x坐标轴集合 - axisLabel: { - //X轴标签 - show: true, - rotate: 40, - textStyle: { - color: "#fff", //字体颜色 - fontSize: 12, //字体大小 + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(0), }, - interval: obj.xAxis.length > 30 ? 9 : 0, //主要设置其间隔，间隔为3 }, - axisLine: { - lineStyle: { - color: "#fff", - }, + }, + data: options3.returnA, + }; + + let objs2 = { + // 折线图的样式 + smooth: true, + name: nameB, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(1), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, }, }, - yAxis: [ - { - type: "value", - nameTextStyle: { - color: "#fff", - fontSize: 12, - }, - lineStyle: { - color: "#fff", - }, - minInterval: 5, - axisLabel: { - textStyle: { - color: "#fff", //字体颜色 - fontSize: 14, //字体大小 - }, - formatter: (e) => { - return `${e}`; - }, - }, - axisTick: { show: false }, - axisLine: { - show: false, - }, - splitLine: { - //Y轴分隔符 - show: true, - lineStyle: { - color: "#fff", - type: "dashed", - }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(1), }, }, - ], - series: obj.series, + }, + data: options3.returnB, }; - if (obj.max) { - option.yAxis[0].max = 100; - } - if (obj.xAxis.length > 30) { - option.dataZoom = [ - { - type: "inside", - }, - ]; - } + options3.series = [objs1, objs2]; + this.$nextTick(() => { + this.creatLine(options3); + }); + }, - // 使用刚指定的配置项和数据显示图表。 - option && myChart.setOption(option); - window.onresize = function () { - myChart.resize(); + // 获取公司列表 + biFindHouseByOrgCode() { + const params = { + orgCode: this.companyValue, }; + if (this.headIndex == "违禁预警") { + params.orgCode = localStorage.getItem("orgCode"); + } + this.$api.http.biFindHouseByOrgCode(params).then((res) => { + if (res.code == 10000) { + this.projectOptions = res.data; + } + }); }, - // 格式化饼图数据 - formatterPie() { - this.rsideDataList.forEach((list) => { - if (list.params == "visitReceptionDistribute") { - let gentle = 0; - let [arr1, arr2] = [[], []]; - this.visitReceptionDistribute.forEach((item) => { - if (item.name != "首次到访") { - gentle += item.value; + // 案场排名顶部对比数据 + biTopStatisticData() { + // 接口入参 + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + houseId: this.projectValue, + }; + this.$api.http.biTopStatisticData(params).then((res) => { + if (res.code == 10000) { + this.caseRankingList.forEach((item) => { + item.resultA = res.data.resultA[item.params]; + item.resultB = res.data.resultB[item.params]; + }); + } + }); + }, + + // 获取案场详情柱状图数据 + biRankingData() { + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + orderBy: this.orderBy, // 1 前10，2 后10 + dimensionType: this.dimensionType, //1 项目，2 城市，3 区域 + }; + this.$api.http.biRankingData(params).then((res) => { + if (res.code == 10000) { + this.rankingEchartsBarList.forEach((ob) => { + let object = res.data[ob.params]; + console.log(object, ob.params); + let xAxis = object.data.map((item) => { + return item.name; + }); + let avgList = []; + let yAxis = {}; + if (this.companyValue) { + avgList.push({ + yAxis: object.companyAvg, + name: "集团平均", + }); + try { + if ( + object.data[this.orderBy == 1 ? 0 : object.data.length - 1] + .value < object.companyAvg + ) { + yAxis.max = object.companyAvg; + } + } catch (e) { + console.log(e); + } } else { - arr1.push(item); } - arr2.push(item); - }); - let series = [ - { - name: "到访次数分布", - type: "pie", - selectedMode: "single", - radius: [0, "30%"], - label: { - position: "inner", - fontSize: 14, - }, - labelLine: { - show: false, - }, - data: arr1, - }, - { - name: "到访次数分布", - type: "pie", - radius: ["45%", "60%"], - labelLine: { - length: 30, - }, - data: arr2, - }, - ]; - series[0].data.push({ - name: "复访接待", - value: gentle, - }); - this.creatPie({ - id: list.params, - legend: { - show: false, - }, - series: series, - }); - } else { - let legend = this[list.params].map((item) => { - return item.name; - }); - this.creatPie({ - id: list.params, - grid: { - bottom: "20%", - top: "5%", - }, - legend: { - legend: legend, - show: true, - orient: "horizontal", - type: "scroll", - bottom: "5%", - textStyle: { - color: "#fff", - }, - }, - series: [ - { - name: list.title, - type: "pie", - radius: ["45%", "60%"], - labelLine: { - length: 5, - showAbove: true, - }, - minAngle: 5, - avoidLabelOverlap: true, - data: this[list.params], - itemStyle: { - normal: { - color: function (colors) { - var colorList = [ - "#D0444D", - "#376FE3", - "#E1B31F", - "#8D25E4", - "#DF7323", - "#2ED1EE", - ]; - return colorList[colors.dataIndex % 6]; + if (ob.unit == "%") { + yAxis = { + max: 100, + }; + } + + this.$nextTick(() => { + this.creatBar({ + id: ob.params, + xAxis: xAxis, + yAxis: yAxis, + series: [ + { + type: "bar", + barMaxWidth: "20%", + name: ob.title, + data: object.data || [], + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function (params) { + let colorList = [ + ["#FF7B96", "#FA3E63"], + ["#FC6128", "#FAB519"], + ["#FBE695", "#FFC536"], + ["#4C83FF", "#2AFADF"], + ]; + + let colorItem = + colorList[ + params.dataIndex > 2 ? 3 : params.dataIndex + ]; + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: colorItem[0], + }, + { + offset: 1, + color: colorItem[1], + }, + ], + false + ); + }, + }, + }, + markLine: { + symbol: ["none", "none"], // none为标线两端的样式为无，可更改 + lineStyle: { + normal: { + color: "#34DBFC", // 这儿设置安全基线颜色 + }, + }, + data: avgList, + label: { + show: true, + position: "end", + padding: [-13, -20, 15, -85], + formatter: (data) => { + return `${data.name}：${data.value}`; + }, + }, }, }, - }, - }, - ], + ], + }); + }); }); } }); }, - // 创建饼图 - creatPie(obj) { - // 基于准备好的dom，初始化echarts实例 - let myChart = echarts.init(document.getElementById(obj.id)); - myChart.clear(); - let option = {}; - if (obj.series[0].data.length != 0) { - option = { - tooltip: { - trigger: "item", - }, - legend: obj.legend, - series: obj.series, - }; - } else { - option = this.setEmpty(); - } - option && myChart.setOption(option); - window.onresize = function () { - myChart.resize(); - }; + // 下划线 + tableRowClassName({ row, rowIndex }) { + if (rowIndex % 2 == 0) { + return "second"; + } + }, + // 弹窗关闭 + handleClose() { + this.dialogVisible = false; + this.current = 1; + this.size = 10; }, - // 重绘echarts - getFormatter(params, name) { - let xAxis = this[params].map((item) => { - return item.name; + // 弹窗展示 + showDialog(data) { + this.showDialogData = data; + const params = { + dataType: data.dataType, + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + current: this.current, + size: this.size, + }; + this.$api.http.biChooseDataTable(params).then((res) => { + if (res.code == 10000) { + let arr = [...this.stayHandleList, ...this.jiedaiList]; + let obj = arr.find((item) => item.title == data.title); + this.total = res.data.total; + this.dialogTitle = data.title; + this.tableNameList = dialogConstList[obj.tableListName]; + this.tableData = res.data.records; + this.dialogVisible = true; + } }); + }, - this.$nextTick(() => { - this.creatBar({ - id: params, - xAxis: xAxis, - series: [ - { - type: "bar", - barMaxWidth: "20%", - name: name, - data: this[params], - itemStyle: { - normal: { - //柱体的颜色 - //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 - color: function (params) { - let colorList = [ - ["#FF7B96", "#FA3E63"], - ["#FC6128", "#FAB519"], - ["#FBE695", "#FFC536"], - ["#4C83FF", "#2AFADF"], - ]; - - let colorItem = - colorList[params.dataIndex > 2 ? 3 : params.dataIndex]; - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: colorItem[0], - }, - { - offset: 1, - color: colorItem[1], - }, - ], - false - ); - }, - }, - }, - }, - ], - }); + // 获取页面数据 + biDataOverview() { + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + }; + this.$api.http.biDataOverview(params).then((res) => { + if (res.code == 10000) { + this.receptionCount = res.data.statisticData.receptionCount || 0; + this.jiedaiList.forEach((item) => { + // 接待趋势 + item.data = res.data.statisticData[item.params] || 0; + }); + this.stayHandleList.forEach((item) => { + // 销讲趋势 + item.data = res.data.statisticData[item.params] || 0; + }); + } }); }, - // 格式化柱状图数据 - formatterBar() { - this.lsideDataList.forEach((list) => { - let xAxis = this[list.params].map((item) => { - return item.name; - }); + // 用户总览右侧菜单 + biDataOverviewDistribute() { + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + }; + this.$api.http.biDataOverviewDistribute(params).then((res) => { + if (res.code == 10000) { + //右侧菜单数据填充 + this.rsideDataList.forEach((item) => { + this[item.params] = res.data[item.params] || []; + }); - let xAxis1 = this[list.params1].map((item) => { - return item.name; - }); + this.$nextTick(() => { + this.formatterPie(); + }); + } + }); + }, - this.$nextTick(() => { - if (list.activeName == list.params) { - this.creatBar({ - id: list.params, - xAxis: xAxis, - series: [ - { - type: "bar", - barMaxWidth: "20%", - name: list.title, - data: this[list.params], - itemStyle: { - normal: { - //柱体的颜色 - //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 - color: function (params) { - let colorList = [ - ["#FF7B96", "#FA3E63"], - ["#FC6128", "#FAB519"], - ["#FBE695", "#FFC536"], - ["#4C83FF", "#2AFADF"], - ]; + // 用户总览左侧菜单饼图 + biDataOverviewTendency() { + const params = { + dateType: this.dateSelectIndex, + orgCode: this.companyValue, + startDate: this.time[0] || "", + endDate: this.time[1] || "", + }; + this.$api.http.biDataOverviewTendency(params).then((res) => { + if (res.code == 10000) { + this.allRecSaleList = res.data.tendencyData || []; // 趋势图 - let colorItem = - colorList[ - params.dataIndex > 2 ? 3 : params.dataIndex - ]; - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: colorItem[0], - }, - { - offset: 1, - color: colorItem[1], - }, - ], - false - ); - }, - }, - }, - }, - ], - }); - } else { - this.creatBar({ - id: list.params1, - xAxis: xAxis1, - series: [ - { - type: "bar", - barMaxWidth: "20%", - name: list.title, - data: this[list.params1], - itemStyle: { - normal: { - //柱体的颜色 - //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 - color: function (params) { - let colorList = [ - ["#FF7B96", "#FA3E63"], - ["#FC6128", "#FAB519"], - ["#FBE695", "#FFC536"], - ["#4C83FF", "#2AFADF"], - ]; + //左侧菜单数据填充 + this.lsideDataList.forEach((item) => { + this[item.params] = res.data[item.params] || []; + this[item.params1] = res.data[item.params1] || []; + }); - let colorItem = - colorList[ - params.dataIndex > 2 ? 3 : params.dataIndex - ]; - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: colorItem[0], - }, - { - offset: 1, - color: colorItem[1], - }, - ], - false - ); - }, - }, - }, - }, - ], - }); - } - }); + this.$nextTick(() => { + this.empityReceptionListSalesExecution(); + this.formatLineData(); + this.formatterBar(); + }); + } }); }, - // 生成柱状图 - creatBar(obj) { - // 基于准备好的dom，初始化echarts实例 - let myChart = echarts.init(document.getElementById(obj.id)); - myChart.clear(); - let option = {}; - if (obj.series[0].data.length > 0) { - option = { - legend: obj.legend ? obj.legend : { show: false }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", - }, + // 获取公司 + biGetOrgCodeList() { + this.$api.http.biGetOrgCodeList().then((res) => { + if (res.code == 10000) { + this.companyOptions = res.data; + } + }); + }, + + // 清空存放的series变量 + empityReceptionListSalesExecution() { + this.receptionList = []; + this.salesExecution = []; + }, + + // 处理折线统计图的数据 + formatLineData() { + let arr1 = [ + { + name: "接待量", + params: "receptionCount", + }, + { + name: "有效接待", + params: "activeCustomer", + }, + { + params: "prohibitedCustomer", + name: "违禁接待", + }, + ]; + let obj1 = { + id: "tendencyData1", + xAxis: [], + legend: [], + series: [], + }; + arr1.forEach((item, index) => { + let par = { + // 折线图的样式 + smooth: true, + name: item.name, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(index), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, }, - grid: obj.grid - ? obj.grid - : { - left: "3%", - right: "4%", - bottom: "3%", - containLabel: true, - }, - xAxis: [ - { - type: "category", - data: obj.xAxis, - axisTick: { - alignWithLabel: true, - }, - axisLabel: { - //X轴标签 - show: true, - rotate: 40, - textStyle: { - color: "#fff", //字体颜色 - fontSize: 12, //字体大小 - }, - interval: obj.xAxis.length >= 30 ? 3 : 0, //主要设置其间隔，间隔为3 - }, - axisLine: { - lineStyle: { - color: "#fff", - }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(index), }, }, - ], - yAxis: [ - { - ...obj.yAxis, - type: "value", - nameTextStyle: { - color: "#fff", - fontSize: 12, - }, - lineStyle: { - color: "#fff", - }, - axisLabel: { - textStyle: { - color: "#fff", //字体颜色 - fontSize: 14, //字体大小 - }, - formatter: (e) => { - return `${e}`; - }, - }, - axisTick: { show: false }, - axisLine: { - show: false, - }, - splitLine: { - //Y轴分隔符 - show: true, - lineStyle: { - color: "#fff", - type: "dashed", - }, + }, + data: [], + }; + this.allRecSaleList.forEach((org) => { + par.data.push(org[item.params] || 0); + + if (!obj1.xAxis.includes(org.statDate.split(" ")[0])) { + obj1.xAxis.push(org.statDate.split(" ")[0]); + } + + if (!obj1.legend.includes(item.name)) { + obj1.legend.push(item.name); + } + }); + this.receptionList.push(par); + }); + let arr2 = [ + { + name: "平均销讲执行率", + params: "fraction", + }, + { + name: "平均挖掘执行率", + params: "wordFraction", + }, + { + name: "平均挖掘成功率", + params: "wordFinishFraction", + }, + ]; + + let obj2 = { + id: "tendencyData2", + xAxis: [], + legend: [], + series: [], + max: 100, + }; + + arr2.forEach((item, index) => { + let par = { + // 折线图的样式 + smooth: true, + name: item.name, + type: "line", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 1, + this.lineColorLinear(index), + false + ), + shadowColor: "rgba(44,118,222, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: { + type: "linear", // 线性渐变 + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: this.lineColorLinear(index), }, }, - ], - series: obj.series, + }, + data: [], }; - if (obj.color) { - option.color = obj.color; - } - if (obj.xAxis.length > 30) { - option.dataZoom = [ - { - type: "inside", - }, - ]; + + this.allRecSaleList.forEach((org) => { + par.data.push(org[item.params] || 0); + + if (!obj2.xAxis.includes(org.statDate.split(" ")[0])) { + obj2.xAxis.push(org.statDate.split(" ")[0]); + } + + if (!obj2.legend.includes(item.name)) { + obj2.legend.push(item.name); + } + }); + + this.salesExecution.push(par); + }); + + obj1.series = this.receptionList; + obj2.series = this.salesExecution; + console.log(obj1, "这里是"); + + this.$nextTick(() => { + this.creatLine(obj1); + this.creatLine(obj2); + }); + }, + + // 创建折线图 + creatLine(obj) { + // 基于准备好的dom，初始化echarts实例 + let myChart = echarts.init(document.getElementById(obj.id)); + myChart.clear(); + // this.receptionList + // 指定图表的配置项和数据 + let grid = { + top: "10%", + bottom: "25%", + right: "5%", + left: "15%", + }; + let option = { + legend: { + show: true, + bottom: "0", + right: "center", + orient: "horizontal", // 图例列表的布局朝向; horizontal; vertical + data: obj.legend, + icon: "circle", + left: "center", // 距离容器侧边距离 + textStyle: { + color: "#fff", + fontSize: 12, + }, + }, + + grid: obj.grid ? obj.grid : grid, + tooltip: { + trigger: "axis", + }, + xAxis: { + data: obj.xAxis, // x坐标轴集合 + axisLabel: { + //X轴标签 + show: true, + rotate: 40, + textStyle: { + color: "#fff", //字体颜色 + fontSize: 12, //字体大小 + }, + interval: obj.xAxis.length > 30 ? 9 : 0, //主要设置其间隔，间隔为3 + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + }, + yAxis: [ + { + type: "value", + nameTextStyle: { + color: "#fff", + fontSize: 12, + }, + lineStyle: { + color: "#fff", + }, + minInterval: 5, + axisLabel: { + textStyle: { + color: "#fff", //字体颜色 + fontSize: 14, //字体大小 + }, + formatter: (e) => { + return `${e}`; + }, + }, + axisTick: { show: false }, + axisLine: { + show: false, + }, + splitLine: { + //Y轴分隔符 + show: true, + lineStyle: { + color: "#fff", + type: "dashed", + }, + }, + }, + ], + series: obj.series, + }; + if (obj.max) { + option.yAxis[0].max = 100; + } + + if (obj.xAxis.length > 30) { + option.dataZoom = [ + { + type: "inside", + }, + ]; + } + + // 使用刚指定的配置项和数据显示图表。 + option && myChart.setOption(option); + window.onresize = function () { + myChart.resize(); + }; + }, + + // 格式化饼图数据 + formatterPie() { + this.rsideDataList.forEach((list) => { + if (list.params == "visitReceptionDistribute") { + let gentle = 0; + let [arr1, arr2] = [[], []]; + this.visitReceptionDistribute.forEach((item) => { + if (item.name != "首次到访") { + gentle += item.value; + } else { + arr1.push(item); + } + arr2.push(item); + }); + let series = [ + { + name: "到访次数分布", + type: "pie", + selectedMode: "single", + radius: [0, "30%"], + label: { + position: "inner", + fontSize: 14, + }, + labelLine: { + show: false, + }, + data: arr1, + }, + { + name: "到访次数分布", + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 30, + }, + data: arr2, + }, + ]; + series[0].data.push({ + name: "复访接待", + value: gentle, + }); + this.creatPie({ + id: list.params, + legend: { + show: false, + }, + series: series, + }); + } else { + let legend = this[list.params].map((item) => { + return item.name; + }); + this.creatPie({ + id: list.params, + grid: { + bottom: "20%", + top: "5%", + }, + legend: { + legend: legend, + show: true, + orient: "horizontal", + type: "scroll", + bottom: "5%", + textStyle: { + color: "#fff", + }, + }, + series: [ + { + name: list.title, + type: "pie", + radius: ["45%", "60%"], + labelLine: { + length: 5, + showAbove: true, + }, + minAngle: 5, + avoidLabelOverlap: true, + data: this[list.params], + itemStyle: { + normal: { + color: function (colors) { + var colorList = [ + "#D0444D", + "#376FE3", + "#E1B31F", + "#8D25E4", + "#DF7323", + "#2ED1EE", + ]; + return colorList[colors.dataIndex % 6]; + }, + }, + }, + }, + ], + }); + } + }); + }, + // 创建饼图 + creatPie(obj) { + // 基于准备好的dom，初始化echarts实例 + let myChart = echarts.init(document.getElementById(obj.id)); + myChart.clear(); + let option = {}; + if (obj.series[0].data.length != 0) { + option = { + tooltip: { + trigger: "item", + }, + legend: obj.legend, + series: obj.series, + }; + } else { + option = this.setEmpty(); + } + + option && myChart.setOption(option); + window.onresize = function () { + myChart.resize(); + }; + }, + + // 重绘echarts + getFormatter(params, name) { + let xAxis = this[params].map((item) => { + return item.name; + }); + + this.$nextTick(() => { + this.creatBar({ + id: params, + xAxis: xAxis, + series: [ + { + type: "bar", + barMaxWidth: "20%", + name: name, + data: this[params], + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function (params) { + let colorList = [ + ["#FF7B96", "#FA3E63"], + ["#FC6128", "#FAB519"], + ["#FBE695", "#FFC536"], + ["#4C83FF", "#2AFADF"], + ]; + + let colorItem = + colorList[params.dataIndex > 2 ? 3 : params.dataIndex]; + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: colorItem[0], + }, + { + offset: 1, + color: colorItem[1], + }, + ], + false + ); + }, + }, + }, + }, + ], + }); + }); + }, + + // 格式化柱状图数据 + formatterBar() { + this.lsideDataList.forEach((list) => { + let xAxis = this[list.params].map((item) => { + return item.name; + }); + + let xAxis1 = this[list.params1].map((item) => { + return item.name; + }); + + this.$nextTick(() => { + if (list.activeName == list.params) { + this.creatBar({ + id: list.params, + xAxis: xAxis, + series: [ + { + type: "bar", + barMaxWidth: "20%", + name: list.title, + data: this[list.params], + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function (params) { + let colorList = [ + ["#FF7B96", "#FA3E63"], + ["#FC6128", "#FAB519"], + ["#FBE695", "#FFC536"], + ["#4C83FF", "#2AFADF"], + ]; + + let colorItem = + colorList[ + params.dataIndex > 2 ? 3 : params.dataIndex + ]; + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: colorItem[0], + }, + { + offset: 1, + color: colorItem[1], + }, + ], + false + ); + }, + }, + }, + }, + ], + }); + } else { + this.creatBar({ + id: list.params1, + xAxis: xAxis1, + series: [ + { + type: "bar", + barMaxWidth: "20%", + name: list.title, + data: this[list.params1], + itemStyle: { + normal: { + //柱体的颜色 + //右，下，左，上（1，0，0，0）表示从正右开始向左渐变 + color: function (params) { + let colorList = [ + ["#FF7B96", "#FA3E63"], + ["#FC6128", "#FAB519"], + ["#FBE695", "#FFC536"], + ["#4C83FF", "#2AFADF"], + ]; + + let colorItem = + colorList[ + params.dataIndex > 2 ? 3 : params.dataIndex + ]; + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: colorItem[0], + }, + { + offset: 1, + color: colorItem[1], + }, + ], + false + ); + }, + }, + }, + }, + ], + }); + } + }); + }); + }, + + // 生成柱状图 + creatBar(obj) { + // 基于准备好的dom，初始化echarts实例 + let myChart = echarts.init(document.getElementById(obj.id)); + myChart.clear(); + let option = {}; + if (obj.series[0].data.length > 0) { + option = { + legend: obj.legend ? obj.legend : { show: false }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + }, + grid: obj.grid + ? obj.grid + : { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: obj.xAxis, + axisTick: { + alignWithLabel: true, + }, + axisLabel: { + //X轴标签 + show: true, + rotate: 40, + textStyle: { + color: "#fff", //字体颜色 + fontSize: 12, //字体大小 + }, + interval: obj.xAxis.length >= 30 ? 3 : 0, //主要设置其间隔，间隔为3 + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + }, + ], + yAxis: [ + { + ...obj.yAxis, + type: "value", + nameTextStyle: { + color: "#fff", + fontSize: 12, + }, + lineStyle: { + color: "#fff", + }, + axisLabel: { + textStyle: { + color: "#fff", //字体颜色 + fontSize: 14, //字体大小 + }, + formatter: (e) => { + return `${e}`; + }, + }, + axisTick: { show: false }, + axisLine: { + show: false, + }, + splitLine: { + //Y轴分隔符 + show: true, + lineStyle: { + color: "#fff", + type: "dashed", + }, + }, + }, + ], + series: obj.series, + }; + if (obj.color) { + option.color = obj.color; + } + if (obj.xAxis.length > 30) { + option.dataZoom = [ + { + type: "inside", + }, + ]; + } + } else { + option = this.setEmpty(); + } + option && myChart.setOption(option); + window.onresize = function () { + myChart.resize(); + }; + }, + + // 折线图线的颜色 + lineColorLinear(index) { + let arr = [ + [ + { + offset: 0, + color: "#4C83FF", + }, + { + offset: 1, + color: "#2AFADF", + }, + ], + + [ + { + offset: 0, + color: "#FAB519", + }, + { + offset: 1, + color: "#FC6128", + }, + ], + + [ + { + offset: 0, + color: "#FF7B96", + }, + { + offset: 1, + color: "#FA3E63", + }, + ], + ]; + return arr[index]; + }, + + // 设置数据为空时展示 + setEmpty() { + return { + title: { + text: " {a|}", + x: "center", + y: "center", + subtext: "糟糕！数据不见了", + itemGap: -20, + textStyle: { + rich: { + a: { + color: "#000", + fontSize: "16", + height: 80, + width: 160, + backgroundColor: { + image: + "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==", + }, + }, + }, + }, + subtextStyle: { + fontSize: 16, + }, + }, + }; + }, + + // 公司弹窗修改 + changeCompany() { + if (this.headIndex == "案场排名" && this.companyValue) { + let index = this.rankingTypeList.findIndex((item) => item.value == 3); + this.rankingTypeList[index].disabled = false; + } else if (this.headIndex == "接待分析") { + this.projectValue = ""; + this.biFindHouseByOrgCode(); + } else { + this.dimensionType = 1; + let index = this.rankingTypeList.findIndex((item) => item.value == 3); + this.rankingTypeList[index].disabled = true; + } + }, + + // + hahaABCD(e) { + console.log(e); + }, + + // 返回首页 + backHome() { + this.$router.go(-1); + }, + + // 选中nav导航 + selectNav(index) { + this.headIndex = index.title; + sessionStorage.setItem("BIHeadIndex", this.headIndex); + this.projectValue = ""; + this.initPage(); + }, + + // 时间类型选项被点击 + timerClick(index) { + this.time = []; + this.dateSelectIndex = index; + this.initPage(); + }, + + // 自定义时间改变 + timerChange() { + this.dateSelectIndex = null; + this.initPage(); + }, + + // To doing + // + handleCurrentChange(e) { + if (this.headIndex != "违禁预警") { + this.current = e; + this.showDialog(this.showDialogData); + } else { + if (this.dialogVisible) { + this.current = e; + this.biWarningList(); + } else { + this.currents = e; + this.biWarningMessageList(); + } + } + }, + + // + handleSizeChange(e) { + if (this.headIndex != "违禁预警") { + this.size = e; + this.showDialog(this.showDialogData); + } else { + if (this.dialogVisible) { + this.sizes = e; + this.biWarningList(); + } else { + this.sizes = e; + this.biWarningMessageList(); + } + } + }, + }, +}; + + + +