283 lines
7.6 KiB
Vue
283 lines
7.6 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";
|
|
|
|
export default {
|
|
name: "AppDvWeiyang",
|
|
components: {NavTabs, AiEchart, ChargingPercent, ValueUnit, IconSmallPanel, IconStaPanel, SubHeader},
|
|
label: "未央最新定制大屏",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
menuName: {default: '未央最新定制大屏'}
|
|
},
|
|
data() {
|
|
return {
|
|
areaId: ""
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["user"]),
|
|
currentAreaId: v => v.areaId || v.user.info.areaId,
|
|
isLastAreaLevel: v => !/0{3}$/.test(v.currentAreaId),
|
|
areaSta: v => [
|
|
{label: "社区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d80346ec1ea.png", value: 0, unit: "个"},
|
|
{label: "小区数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4c0445d.png", value: 0, unit: "个"},
|
|
{label: "村数", icon: "https://cdn.sinoecare.com/i/2024/09/04/66d7fd4d28f1b.png", value: 0, unit: "个"},
|
|
],
|
|
workorderSta: v => [
|
|
{label: "已处理", value: 0, unit: "个"},
|
|
{label: "办理中", value: 0, unit: "个"},
|
|
{label: "待受理", value: 0, unit: "个"},
|
|
{label: "延期", value: 0, unit: "个", isRed: !0},
|
|
],
|
|
workorderTable: v => ({
|
|
header: ['时间', '状态', '事件描述'],
|
|
headerBGC: '#21b4fd1a',
|
|
oddRowBGC: "transparent",
|
|
evenRowBGC: "transparent",
|
|
data: []
|
|
}),
|
|
tabs: v => [
|
|
{label: "楼栋长", value: ""},
|
|
{label: "治安协理员", value: ""},
|
|
{label: "业委会", value: ""},
|
|
{label: "网格员", value: ""},
|
|
{label: "第三方机构", value: ""},
|
|
]
|
|
},
|
|
methods: {
|
|
getData() {
|
|
|
|
},
|
|
getLabel(key) {
|
|
return this.dict.getLabel("wyBasicCount", key) || key
|
|
}
|
|
},
|
|
created() {
|
|
this.dict.load("wyBasicCount")
|
|
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('党组织数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd06f269b.png"/>
|
|
<icon-sta-panel class="a1 pad-24" :label="getLabel('党员人数')" :value="0" 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('居民人数')" :value="0" unit="人" icon="https://cdn.sinoecare.com/i/2024/09/04/66d7cd083a9b0.png"/>
|
|
<div class="flex staPercent">
|
|
<div class="flex fill">月环比<p v-text="0"/></div>
|
|
<div class="flex fill">年同比<p class="minus" v-text="0"/></div>
|
|
</div>
|
|
</div>
|
|
<div class="b2 pad-v8 pad-h12 flex column normal font-12">
|
|
<div v-text="`AI咨询服务累计数`"/>
|
|
<value-unit :value="0" unit="次" color="#fff"/>
|
|
<ai-echart/>
|
|
<div class="flex">
|
|
日服务处理量
|
|
<value-unit class="mar-l8" :value="0" unit="次" size="mini"/>
|
|
</div>
|
|
</div>
|
|
<div class="c flex column center">
|
|
<div class="mar-b40" v-text="'工单处置率'"/>
|
|
<charging-percent label="已完成工单" :value="80"/>
|
|
</div>
|
|
<div class="c1 grid">
|
|
<icon-small-panel class="item row pad-h16" :label="getLabel('工单总数')" :value="0" 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/>
|
|
</div>
|
|
<div class="f"></div>
|
|
<div class="g flex column normal">
|
|
<sub-header title="工单分类"/>
|
|
<ai-echart/>
|
|
<dv-scroll-board class="pad-h12" :config="workorderTable"/>
|
|
</div>
|
|
<div class="h flex column normal">
|
|
<sub-header title="全区积分排名(前10)">
|
|
<nav-tabs class="pad-r8" slot="right" :list="tabs"/>
|
|
</sub-header>
|
|
<ai-echart/>
|
|
</div>
|
|
<div class="i flex column normal">
|
|
<sub-header title="居民统计">
|
|
<div class="info pad-r8" slot="right" v-text="`按街道进行汇总统计`"/>
|
|
</sub-header>
|
|
<ai-echart/>
|
|
</div>
|
|
<div class="j flex column normal">
|
|
<sub-header title="特殊人群数量统计"/>
|
|
<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;
|
|
|
|
p {
|
|
|
|
font-size: 16px;
|
|
color: #26FF9A;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: DINAlternate;
|
|
|
|
&:before {
|
|
margin-left: 8px;
|
|
margin-right: 2px;
|
|
font-size: 10px;
|
|
content: "▲";
|
|
}
|
|
|
|
&:after {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|