527 lines
17 KiB
Vue
527 lines
17 KiB
Vue
<script>
|
|
import {mapState} from "vuex"
|
|
import SubHeader from "./comps/subHeader.vue";
|
|
import IconStaPanel from "./comps/iconStaPanel.vue";
|
|
import IconSmallPanel from "./comps/iconSmallPanel.vue";
|
|
import ValueUnit from "./comps/valueUnit.vue";
|
|
import ChargingPercent from "./comps/chargingPercent.vue";
|
|
import AiEchart from "dui/packages/tools/AiEchart.vue";
|
|
import NavTabs from "./comps/navTabs.vue";
|
|
|
|
const handlePercent = v => parseFloat(isNaN(v) ? 0 : v.toFixed(2))
|
|
const calcComparePercent = (v = 1, target = 1) => {
|
|
const value = (v - target) / target * 100
|
|
return handlePercent(value)
|
|
}
|
|
const hide = {show: false}
|
|
const aiTrend = {
|
|
series: {
|
|
type: "bar", barWidth: 12, itemStyle: {
|
|
color: {
|
|
type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
|
|
{offset: 0, color: "#00EFFF"},
|
|
{offset: 1, color: "#00527D"},
|
|
]
|
|
}
|
|
}, encode: {x: 'd', y: 'c'}
|
|
},
|
|
yAxis: {type: "value", axisLabel: hide, axisLine: hide, splitLine: hide},
|
|
xAxis: {type: "category", axisLabel: hide, axisLine: {itemStyle: {color: 'rgba(179,223,255,0.4)'}}},
|
|
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: [
|
|
['#1f595940', '#33CCCC'],
|
|
['#159AFF00', '#2C97E8'],
|
|
['#BFEAFF1a', '#BFEAFF'],
|
|
['#DBB36E1a', '#DBB36E'],
|
|
['#757BD21a', '#757BD1'],
|
|
].map(([start, end]) => ({type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{offset: 0, color: start}, {offset: 1, color: end}]})),
|
|
series: workChainSeries.map(name => ({name, type: "bar", barWidth: 7})),
|
|
yAxis: {type: "category", axisLine: {lineStyle: {color: "rgba(102,132,153,0.5)"}}, axisTick: hide, axisLabel: {color: "#9CB3C9"}},
|
|
xAxis: {type: "value", splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}, axisTick: hide, axisLabel: {color: "#9CB3C9"}},
|
|
grid: {left: 12, right: 24, top: 0, bottom: 40, containLabel: true},
|
|
legend: {show: true, bottom: 0, textStyle: {color: '#fff'}},
|
|
tooltip: {trigger: 'axis', backgroundColor: "#33333388", textStyle: {color: '#fff'}}
|
|
}
|
|
const residentDistribution = {
|
|
series: {
|
|
type: "bar", barWidth: 12, itemStyle: {
|
|
color: {
|
|
type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [
|
|
{offset: 0, color: "#00EFFF"},
|
|
{offset: 1, color: "#00527D"},
|
|
]
|
|
}
|
|
},
|
|
encode: {x: 'name', y: 'c'}
|
|
},
|
|
yAxis: {type: "value", axisLine: hide, splitLine: {lineStyle: {type: 'dashed', color: 'rgba(61,82,102,0.65)'}}},
|
|
xAxis: {type: "category", axisTick: hide, axisLabel: {rotate: 45}},
|
|
grid: {left: 12, right: 12, top: 20, bottom: 0, containLabel: true},
|
|
legend: {show: false},
|
|
}
|
|
const spDistribution = {
|
|
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,
|
|
}
|
|
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 {
|
|
name: "AppDvWeiyang",
|
|
components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
|
|
label: "未央最新定制大屏",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
menuName: {default: '未央最新定制大屏'}
|
|
},
|
|
data() {
|
|
return {
|
|
areaId: "",
|
|
integralOrderType: "",
|
|
sta: {},
|
|
chartData: {},
|
|
tableData: {}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["user"]),
|
|
currentAreaId: v => v.areaId || v.user.info.areaId,
|
|
isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
|
|
areaSta: v => [
|
|
{label: "社区数", icon: "66d80346ec1ea", prop: "communityCount", unit: "个"},
|
|
{label: "小区数", icon: "66d7fd4c0445d", prop: "residentialQuartersCount", unit: "个"},
|
|
{label: "村数", icon: "66d7fd4d28f1b", prop: "villageCount", unit: "个"},
|
|
].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0, icon: `https://cdn.sinoecare.com/i/2024/09/04/${e.icon}.png`})),
|
|
workorderSta: v => [
|
|
{label: "已处理", prop: 'workOrderCountFinishNowMonth', unit: "个"},
|
|
{label: "办理中", prop: 'workOrderCountProcessingNowMonth', unit: "个"},
|
|
{label: "待受理", prop: 'workOrderCountPendingNowMonth', unit: "个"},
|
|
{label: "延期", prop: 'workOrderCountExtensionNowMonth', unit: "个", isRed: !0},
|
|
].map(e => ({...e, label: v.getLabel(e.prop), value: v.sta[e.prop] || 0})),
|
|
workorderTable: v => ({
|
|
header: ['时间', '状态', '事件描述'],
|
|
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,
|
|
`<span class="eventStatus" style="background-color: ${color}24;color: ${color};">${v.$dict.getLabel('clapEventStatus', e.eventStatus)}</span>`,
|
|
e.content]
|
|
})
|
|
}),
|
|
tabs: v => v.$dict.getDict("wyIntegralOrderType").map(e => {
|
|
return {
|
|
label: e.dictName,
|
|
value: e.dictValue
|
|
}
|
|
}),
|
|
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: () => {
|
|
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} = this
|
|
return Promise.all([
|
|
http.post("/app/wyDiy/pvr", null, {params: {areaId}}).then(res => {
|
|
if (res?.data) {
|
|
this.sta = res.data
|
|
}
|
|
}),
|
|
http.post("/app/wyDiy/aiTrend", null, {params: {areaId}}).then(res => {
|
|
if (res?.data) {
|
|
this.$set(this.chartData, "aiTrend", res.data.map(e => [e.d, e.c]))
|
|
}
|
|
}),
|
|
this.getIntegralOrder(),
|
|
http.post("/app/wyDiy/residentDistribution", null, {params: {areaId}}).then(res => {
|
|
if (res?.data) {
|
|
this.$set(this.chartData, "residentDistribution", res.data)
|
|
}
|
|
}),
|
|
http.post("/app/wyDiy/spDistribution", null, {params: {areaId}}).then(res => {
|
|
if (res?.data) {
|
|
this.$set(this.chartData, "spDistribution", res.data)
|
|
}
|
|
}),
|
|
http.post("/app/wyDiy/workChain", null, {params: {areaId}}).then(res => {
|
|
if (res?.data) {
|
|
this.$set(this.chartData, "workChain", res.data.map(e => ['name', ...workChainSeries].map(k => e[k] ?? 0)))
|
|
}
|
|
}),
|
|
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", "clapEventStatus").then(() => {
|
|
this.integralOrderType = this.dict.getDict("wyIntegralOrderType")[0].dictValue
|
|
this.getData()
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<section class="AppDvWeiyang" :class="{isLastAreaLevel}">
|
|
<template v-if="isLastAreaLevel">
|
|
<icon-sta-panel class="a" :label="getLabel('党组织数')" :value="0" unit="人" icon=""/>
|
|
<div class="a1"></div>
|
|
<div class="b"></div>
|
|
<div class="bb grid">
|
|
<div class="item" v-for="(e,i) in Array(4)" :key="i"></div>
|
|
</div>
|
|
<div class="b2"></div>
|
|
<div class="cc grid">
|
|
<div class="item" v-for="(e,i) in Array(3)" :key="i"></div>
|
|
</div>
|
|
<div class="d"></div>
|
|
<div class="e"></div>
|
|
<div class="f"></div>
|
|
<div class="g"></div>
|
|
<div class="h"></div>
|
|
<div class="i"></div>
|
|
<div class="j"></div>
|
|
</template>
|
|
<template v-else>
|
|
<icon-sta-panel class="a pad-24" :label="getLabel('partyOrgCount')" :value="sta.partyOrgCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
|
|
<icon-sta-panel class="a1 pad-24" :label="getLabel('partyCount')" :value="sta.partyCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd0560bea.png"/>
|
|
<div class="b pad-l16 pad-r12 pad-v6">
|
|
<icon-small-panel v-for="(e,i) in areaSta" :key="i" v-bind="e"/>
|
|
</div>
|
|
<div class="b1 pad-v10 pad-h20">
|
|
<icon-sta-panel :label="getLabel('residentCount')" :value="sta.residentCount" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
|
|
<div class="flex staPercent">
|
|
<div class="flex fill">月环比<p :class="{minus:monthOnMonth<0}" v-text="monthOnMonth"/></div>
|
|
<div class="flex fill">年同比<p :class="{minus:yearOnYear<0}" v-text="yearOnYear"/></div>
|
|
</div>
|
|
</div>
|
|
<div class="b2 pad-v8 pad-h12 flex column normal font-12">
|
|
<div v-text="getLabel('aiCount')"/>
|
|
<value-unit :value="sta.aiCount" unit="次" color="#fff"/>
|
|
<ai-echart :ops="chart.aiTrend" :data="chartData.aiTrend"/>
|
|
<div class="flex">
|
|
{{ getLabel('aiCountLastDay') }}
|
|
<value-unit class="mar-l8" :value="sta.aiCountLastDay" unit="次" size="mini"/>
|
|
</div>
|
|
</div>
|
|
<div class="c flex column center">
|
|
<div class="mar-b40" v-text="'工单处置率'"/>
|
|
<charging-percent label="已完成工单" :value="workorderFinishedPercent"/>
|
|
</div>
|
|
<div class="c1 grid">
|
|
<icon-small-panel class="item row pad-h16" :label="getLabel('workOrderCountNowMonth')" :value="sta.workOrderCountNowMonth" unit="个"/>
|
|
<div class="item pad-v12 flex column center" v-for="(e,i) in workorderSta" :key="i" :class="{isRed:e.isRed}">
|
|
<div v-text="e.label"/>
|
|
<value-unit :value="e.value" :unit="e.unit" size="mini"/>
|
|
</div>
|
|
</div>
|
|
<div class="d"></div>
|
|
<div class="e flex column normal">
|
|
<sub-header title="五条工作链"/>
|
|
<ai-echart :ops="chart.workChain" :data="chartData.workChain"/>
|
|
</div>
|
|
<div class="f"></div>
|
|
<div class="g flex column normal">
|
|
<sub-header title="工单分类"/>
|
|
<ai-echart class="wotDistribution" :ops="chart.wotDistribution" :data="chartData.wotDistribution">
|
|
<div class="summary flex column">
|
|
<span v-text="`总数`"/>
|
|
<value-unit :value="wotDistributionTotal" size="mini"/>
|
|
</div>
|
|
</ai-echart>
|
|
<dv-scroll-board class="pad-h12 fill" :config="workorderTable"/>
|
|
</div>
|
|
<div class="h flex column normal">
|
|
<sub-header title="全区积分排名(前10)">
|
|
<nav-tabs class="pad-r8" slot="right" :list="tabs" @click="s=>integralOrderType=s.value"/>
|
|
</sub-header>
|
|
<ai-echart :ops="chart.integralOrder" :data="chartData.integralOrder"/>
|
|
</div>
|
|
<div class="i flex column normal">
|
|
<sub-header title="居民统计">
|
|
<div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
|
|
</sub-header>
|
|
<ai-echart :ops="chart.residentDistribution" :data="chartData.residentDistribution"/>
|
|
</div>
|
|
<div class="j flex column normal">
|
|
<sub-header title="特殊人群数量统计"/>
|
|
<ai-echart :ops="chart.spDistribution" :data="chartData.spDistribution">
|
|
<div class="summary flex column">
|
|
<span v-text="`总数`"/>
|
|
<value-unit :value="spDistributionTotal" unit="人" size="mini"/>
|
|
</div>
|
|
</ai-echart>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
<style lang="scss">
|
|
.AiDvWrapper {
|
|
.viewPanel {
|
|
background-image: url("https://cdn.sinoecare.com/i/2024/09/03/66d6a644bcc6e.png");
|
|
|
|
& > .primary, & > .fill {
|
|
padding: 0 24px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.AppDvWeiyang {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 16px 0;
|
|
grid-auto-rows: 128px;
|
|
grid-template-columns: 245px 245px 240px 240px 180px 180px 230px 1fr;
|
|
grid-template-areas:
|
|
"a a1 b b1 b2 b2 c c1"
|
|
"e e f f f f c c1"
|
|
"e e f f f f g g"
|
|
"e e f f f f g g"
|
|
"e e f f f f g g"
|
|
"h h i i j j g g"
|
|
"h h i i j j g g";
|
|
|
|
&.isLastAreaLevel {
|
|
grid-template-areas:
|
|
"a a1 b bb b2 b2 cc cc"
|
|
"e e f f f f g g"
|
|
"e e f f f f g g"
|
|
"j j f f f f g g"
|
|
"j j f f f f g g"
|
|
"h h i i i i g g"
|
|
"h h i i i i g g";
|
|
|
|
.bb {
|
|
gap: 10px;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.cc {
|
|
grid-area: cc;
|
|
gap: 10px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.item {
|
|
background: #7583900f;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
@each $area in (a, a1, b, b1, b2, c, c1, c2, d, e, f, g, h, i, j) {
|
|
.#{$area} {
|
|
grid-area: $area;
|
|
@if not index((c1),$area) {
|
|
@extend .item;
|
|
}
|
|
}
|
|
}
|
|
|
|
.c1 {
|
|
gap: 10px;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
.row {
|
|
grid-column: 1/3
|
|
}
|
|
}
|
|
|
|
.info {
|
|
font-size: 12px;
|
|
color: #BDCCDB;
|
|
}
|
|
|
|
.staPercent {
|
|
margin-top: 9px;
|
|
line-height: 40px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: #26FF9A;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: DINAlternate;
|
|
|
|
&:before {
|
|
margin-left: 4px;
|
|
margin-right: 2px;
|
|
font-size: 10px;
|
|
content: "▲";
|
|
}
|
|
|
|
&:after {
|
|
font-size: 12px;
|
|
content: "%";
|
|
}
|
|
|
|
&.minus {
|
|
color: #FF2727;
|
|
|
|
&:before {
|
|
content: "▼";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.isRed {
|
|
background: #fa35351a;
|
|
border: 1px solid #f76e6e52;
|
|
|
|
:deep(.valueUnit) {
|
|
color: #FF2727;
|
|
}
|
|
}
|
|
|
|
@each $s in (12, 14, 16, 20, 24, 36) {
|
|
.font-#{$s} {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|