diff --git a/project/biaopin/dv/weiyang/AppDvWeiyang.vue b/project/biaopin/dv/weiyang/AppDvWeiyang.vue index c10dc5cc..00f27308 100644 --- a/project/biaopin/dv/weiyang/AppDvWeiyang.vue +++ b/project/biaopin/dv/weiyang/AppDvWeiyang.vue @@ -30,6 +30,55 @@ const aiTrend = { legend: {show: false}, grid: {left: 0, right: 0, bottom: 1, top: 0, containLabel: true}, } +const integralOrder = { + series: { + name: "c", type: "bar", barWidth: 10, + label: {position: [390, 0], show: true, color: "#fff"}, + labelLine: hide, + showBackground: !0, backgroundStyle: {color: "rgba(107,126,148,0.4)"}, + itemStyle: { + color: ({dataIndex}) => { + const color = { + type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ + {offset: 0, color: "#00527D1a"}, {offset: 1, color: "#00EFFF"}, + ] + } + if (dataIndex === 0) { + color.colorStops = [{offset: 0, color: "#DBB36E1a"}, {offset: 1, color: "#F5C26B"}] + } else if (dataIndex == 1) { + color.colorStops = [{offset: 0, color: "#6070801a"}, {offset: 1, color: "#7AA3CC"}] + } else if (dataIndex == 2) { + color.colorStops = [{offset: 0, color: "#DB9A6E1a"}, {offset: 1, color: "#DB9A6E"}] + } + return color + } + } + }, + yAxis: { + type: "category", inverse: true, axisLine: hide, axisTick: hide, axisPointer: hide, + axisLabel: { + color: "#9CB3C9", formatter: (name, index) => { + const icon = { + 0: "🥇", 1: "🥈", 2: "🥉", + }[index] ?? `{div|${index}}` + return `${icon} ${name}` + }, + rich: { + div: { + borderWidth: 2, + borderColor: {type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{offset: 0, color: "#00EFFF"}, {offset: 1, color: "#00527D"}]}, + color: '#fff', + borderRadius: 4, + padding: [3, 4] + } + } + } + }, + xAxis: hide, + grid: {left: 20, right: 40, top: 0, bottom: 0, containLabel: true}, + legend: hide, + tooltip: {trigger: 'axis', backgroundColor: "#33333388", textStyle: {color: '#fff'}} +} const workChainSeries = ['楼栋长', '治安协理员', '业委会', '网格员', '第三方机构'] const workChain = { color: [ @@ -68,8 +117,19 @@ const spDistribution = { type: 'pie', radius: ['50%', '70%'], padAngle: 3, - label: {}, + label: {color: "#9CB3C9", shadowColor: "transparent", formatter: params => `${params.name}\n${params.value.c}; ${params.percent}%`}, }, + tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`}, + legend: hide, +} +const wotDistribution = { + series: { + type: 'pie', + radius: ['50%', '70%'], + padAngle: 3, + label: {color: "#9CB3C9", shadowColor: "transparent", formatter: params => `${params.name}\n${params.value.c}; ${params.percent}%`}, + }, + tooltip: {formatter: params => `${params.marker} ${params.name} ${params.percent}%`}, legend: hide, } export default { @@ -86,7 +146,8 @@ export default { areaId: "", integralOrderType: "", sta: {}, - chartData: {} + chartData: {}, + tableData: {} } }, computed: { @@ -106,10 +167,15 @@ export default { ].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0})), workorderTable: v => ({ header: ['时间', '状态', '事件描述'], - headerBGC: '#21b4fd1a', - oddRowBGC: "transparent", - evenRowBGC: "transparent", - data: [] + headerBGC: '#21b4fd1a', oddRowBGC: "transparent", evenRowBGC: "transparent", + columnWidth: [160, 100,], align: [, 'center',], + rowNum: 9, + data: v.tableData.wotDistribution?.map(e => { + const color = v.$dict.getColor('clapEventStatus', e.eventStatus) + return [e.createTime, + `${v.$dict.getLabel('clapEventStatus', e.eventStatus)}`, + e.content] + }) }), tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => { return { @@ -120,13 +186,23 @@ export default { monthOnMonth: v => calcComparePercent(v.sta.residentCountLastMonth, v.sta.residentCount), yearOnYear: v => calcComparePercent(v.sta.residentCountLastYear, v.sta.residentCount), workorderFinishedPercent: v => handlePercent(v.sta.workOrderCountFinish / v.sta.workOrderCount * 100), - chart: v => { - return {aiTrend, workChain, residentDistribution, spDistribution} + chart: () => { + return {aiTrend, workChain, residentDistribution, spDistribution, wotDistribution, integralOrder} }, + spDistributionTotal: v => v.chartData.spDistribution?.reduce((a, b) => a.c + b.c, 0) || 0, + wotDistributionTotal: v => v.chartData.wotDistribution?.reduce((a, b) => a.c + b.c, 0) || 0, + }, + watch: { + integralOrderType() { + this.getIntegralOrder() + }, + areaId() { + this.getData() + } }, methods: { getData() { - const {instance: http, currentAreaId: areaId, integralOrderType} = this + const {instance: http, currentAreaId: areaId} = this return Promise.all([ http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => { if (res?.data) { @@ -138,11 +214,7 @@ export default { this.$set(this.chartData, "aiTrend", res.data.map(e => [e.d, e.c])) } }), - http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => { - if (res?.data) { - - } - }), + this.getIntegralOrder(), http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => { if (res?.data) { this.$set(this.chartData, "residentDistribution", res.data) @@ -160,17 +232,37 @@ export default { }), http.post("/app/wyDiy/wotDistribution", null, {params: {areaId}}).then(res => { if (res?.data) { - + this.$set(this.chartData, "wotDistribution", res.data) + } + }), + http.post("/app/wyDiy/reportInfoList", null, {params: {areaId, size: 999}}).then(res => { + if (res?.data) { + this.$set(this.tableData, "wotDistribution", res.data.records) } }), ]) }, getLabel(key) { return this.dict.getLabel("wyBasicCount", key) || key + }, + getIntegralOrder() { + const {instance: http, currentAreaId: areaId, integralOrderType} = this + return http.post("/app/wyDiy/integralOrder", null, {params: {areaId, type: integralOrderType}}).then(res => { + if (res?.data) { + this.$set(this.chartData, "integralOrder", + // res.data + [ + {name: '张三', c: 997}, + {name: '李四', c: 667}, + {name: '钱二', c: 412}, + {name: '王五', c: 232}, + ]) + } + }) } }, created() { - this.dict.load("wyBasicCount", "wyIntegralOrderType").then(() => { + this.dict.load("wyBasicCount", "wyIntegralOrderType", "clapEventStatus").then(() => { this.integralOrderType = this.dict.getDict("wyIntegralOrderType")[0].dictValue this.getData() }) @@ -239,14 +331,19 @@ export default {
- - + +
+ + +
+ +
- +
@@ -256,7 +353,12 @@ export default {
- + +
+ + +
+
@@ -389,5 +491,35 @@ export default { font-size: #{$s}px; } } + + :deep(.j), :deep(.g) { + .summary { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: 400; + color: #fff; + gap: 6px; + } + } + + .wotDistribution { + height: 252px; + flex: unset; + flex-shrink: 0; + } + + :deep(.dv-scroll-board) { + .header-item { + color: #02FEFF; + } + + .eventStatus { + font-size: 12px; + border-radius: 4px; + padding: 4px 8px; + } + } }