Skip to content

E
east-nanjing-new
Commit 674e54aa authored by 程卓's avatar 程卓
Browse files
Options

公共管理接口对接完成

parent f2ea08ce
Show whitespace changes
Inline Side-by-side
Showing with 457 additions and 185 deletions
src/ajax/api.ts
View file @ 674e54aa
......@@ -57,7 +57,7 @@ export default {
GET_TODAYCASE: '/service-special-nandong/compair/willTouch', // 有求必应-今日案件数
GET_STAGECASE: '/service-special-nandong/compair/willTouch/status', // 有求必应-各阶段案件数
GET_WORKSTATION: '/service-special-nandong/compair/willTouch/workStation', // 有求必应-工作站分类
GET_TRACKEVENT: '/api/service-special-nandong/compairs', // 有求必应-事件跟踪
GET_TRACKEVENT: '/service-special-nandong/compairs', // 有求必应-事件跟踪
GET_CASE_CLASSIFICATION_RANK: '/service-special-nandong/compair/analysis', // 案件分析-分类排行
GET_ADDR: '/service-special-nandong/compair/analysis/addr', // 案件分析-多发地点
GET_MOREHAPPEN_ADDR: '/service-special-nandong/compair/analysis/addr', // 案件分析-多发地点
}
src/store/actions.ts
View file @ 674e54aa
......@@ -8,6 +8,7 @@ export default {
initData({ dispatch }: { dispatch: Dispatch }): void {
dispatch('getPropertySummary')
dispatch('getCaseList')
// dispatch('GET_TODAYCASE')
},
// 物业三架马车数据 （缺交叉任职数）
async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
......@@ -456,7 +457,127 @@ export default {
params,
})
).data
console.log(content, '有诉必答 - 紧急案件')
// console.log(content, '有诉必答 - 紧急案件')
commit('SET_URGENTCASE', content)
},
async GET_TODAYCASE(
{
commit,
}: {
commit: Commit
},
params: {
[key: string]: string
}
): Promise<void> {
// 有求必应 - 今日案件数
const { content } = (
await ajax.get({
url: api.GET_TODAYCASE,
params,
})
).data
// console.log(content, '有求必应 - 今日案件数')
commit('SET_TODAYCASE', content)
},
async GET_STAGECASE(
{
commit,
}: {
commit: Commit
},
params: {
[key: string]: string
}
): Promise<void> {
// 有求必应 - 各阶段案件数
const { content } = (
await ajax.get({
url: api.GET_STAGECASE,
params,
})
).data
// console.log(content, '有求必应 - 各阶段案件数')
commit('SET_STAGECASE', content)
},
async GET_WORKSTATION(
{
commit,
}: {
commit: Commit
},
params: {
[key: string]: string
}
): Promise<void> {
// 有求必应 - 工作站分类
const { content } = (
await ajax.get({
url: api.GET_WORKSTATION,
params,
})
).data
// console.log(content, '有求必应 - 工作站分类')
commit('SET_WORKSTATION', content)
},
async GET_TRACKEVENT(
{
commit,
}: {
commit: Commit
},
params: {
[key: string]: string
}
): Promise<void> {
// 有求必应 - 事件跟踪
const { content } = (
await ajax.get({
url: api.GET_TRACKEVENT,
params,
})
).data
// console.log(content, '有求必应 - 事件跟踪')
commit('SET_TRACKEVENT', content)
},
async GET_CASE_CLASSIFICATION_RANK(
{
commit,
}: {
commit: Commit
},
params: {
[key: string]: string
}
): Promise<void> {
// 案件分析 - 分类排行
const { content } = (
await ajax.get({
url: api.GET_CASE_CLASSIFICATION_RANK,
params,
})
).data
console.log(content, '案件分析 - 分类排行')
commit('SET_CASE_CLASSIFICATION_RANK', content)
},
async GET_MOREHAPPEN_ADDR(
{
commit,
}: {
commit: Commit
},
params: {
[key: string]: string
}
): Promise<void> {
// 案件分析 - 多发地点
const { content } = (
await ajax.get({
url: api.GET_MOREHAPPEN_ADDR,
params,
})
).data
console.log(content, '案件分析 - 多发地点')
commit('SET_MOREHAPPEN_ADDR', content)
},
}
src/store/index.ts
View file @ 674e54aa
......@@ -104,6 +104,12 @@ export interface GlobalStateProps {
yousubidaRank: Partial<YousubidaRankProp>
classificationRank: any[]
urgentCase: any[]
todayCase: { [key: string]: number }
stageCase: { [key: string]: number }
workstationKind: { [key: string]: number }
trackEvent: any[]
analysisRank: Partial<DutyDataProp>
moreHappenAddr: Partial<DutyDataProp>
}
export default createStore<GlobalStateProps>({
state,
......
src/store/mutations.ts
View file @ 674e54aa
......@@ -198,4 +198,40 @@ export default {
SET_URGENTCASE(state: GlobalStateProps, data: unknown[]): void {
state.urgentCase = data
},
// 有求必应-今日案件数
SET_TODAYCASE(
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.todayCase = data
},
// 有求必应-各阶段案件数
SET_STAGECASE(
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.stageCase = data
},
// 有求必应-工作站分类
SET_WORKSTATION(
state: GlobalStateProps,
data: { [key: string]: number }
): void {
state.workstationKind = data
},
// 有求必应-事件跟踪
SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {
state.trackEvent = data
},
// 有求必应-分类排行
SET_CASE_CLASSIFICATION_RANK(
state: GlobalStateProps,
data: DutyDataProp
): void {
state.analysisRank = data
},
// 有求必应-多发地点
SET_MOREHAPPEN_ADDR(state: GlobalStateProps, data: DutyDataProp): void {
state.moreHappenAddr = data
},
}
src/store/state.ts
View file @ 674e54aa
......@@ -46,4 +46,10 @@ export default {
yousubidaRank: {},
classificationRank: [],
urgentCase: [],
todayCase: {},
stageCase: {},
workstationKind: {},
trackEvent: [],
analysisRank: { day: [], week: [], month: [] },
moreHappenAddr: { day: [], week: [], month: [] },
} as GlobalStateProps
src/view/components/brief.vue
View file @ 674e54aa
......@@ -58,10 +58,11 @@ export default defineComponent({
.brief-container
display flex
align-items center
white-space nowrap
.count
font-size .12rem
font-size .11rem
&.yellow
font-size .14rem
font-size .13rem
color $yellow
>div
display flex
......
src/view/right/case-analysis.vue
View file @ 674e54aa
......@@ -2,29 +2,32 @@
<m-card title="案件分析">
<div class="nav">
<div>
<Tabs :list="tabs" horizontal />
<Tabs :list="tabs" horizontal @select="curTab = $event" />
</div>
<div>
<span
v-for="option in options"
:key="option"
:class="{ on: curOption === option }"
@click="curOption = option"
:key="option.key"
:class="{ on: curOption === option.key }"
@click="curOption = option.key"
>
{{ option }}
{{ option.name }}
</span>
</div>
</div>
<div class="rank">
<SubTitle>分类排行</SubTitle>
<div class="content">
<div v-if="rankList.length > 0" class="content">
<m-scroll :length="rankList.length" :limit="4">
<m-progress
v-for="rank in rankList"
:key="rank.name"
:value="rank.value"
:value="rank.rate"
:msg="rank"
/>
</m-scroll>
</div>
<m-empty v-else />
</div>
<div class="place">
<SubTitle>多发地点</SubTitle>
......@@ -38,44 +41,98 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { defineComponent, ref, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import Place, { PlaceProp } from '../components/place.vue'
import store from '@/store'
export default defineComponent({
name: 'CaseAnalysis',
components: { Tabs, SubTitle, Place },
setup() {
const todayCase = computed(() => store.state.todayCase)
const curTab = ref('综合')
const tabs = ref<TabsProp[]>([
{
key: 'all',
name: '综合管理',
},
{
key: 'street',
name: '街面管理',
},
{
key: 'community',
name: '小区管理',
},
{ name: '综合管理', key: '综合' },
{ name: '街面管理', key: '街面' },
{ name: '小区管理', key: '小区' },
])
const options = ref(['日', '周', '月'])
const curOption = ref('月')
const rankList = ref([
{ name: '分类1', value: 50 },
{ name: '分类2', value: 31 },
{ name: '分类3', value: 15 },
])
const placeList = ref<PlaceProp[]>([
{ name: '延安东路1292弄', value: 3, type: '路段' },
{ name: '延安东路1293弄', value: 5, type: '小区' },
{ name: '延安东路1294弄', value: 8, type: '商业' },
const options = ref([
{ name: '日', key: 'day' },
{ name: '周', key: 'week' },
{ name: '月', key: 'month' },
])
const curOption = ref('month')
watch(
[() => curTab.value, () => curOption.value],
([type, time]) => {
if (!time || !type) return
console.log(type)
console.log(time)
store.dispatch('GET_CASE_CLASSIFICATION_RANK', {
managementType: type,
})
store.dispatch('GET_MOREHAPPEN_ADDR', {
managementType: type,
})
},
{ immediate: true }
)
const rankList = computed(() => {
const data = store.state.analysisRank[curOption.value] || []
const total = data.reduce((acc, cur) => acc + cur.num, 0)
return data.map((item: any) => ({
name: item.businsessType || item.businessType,
rate: +Math.ceil((item.num / total) * 100).toFixed(0),
value: item.num,
unit: '件',
}))
})
const placeList = computed(() => {
const data = store.state.moreHappenAddr[curOption.value] || []
return data.map((item: any) => ({
name: item.address,
value: item.num,
type: '路段',
}))
})
// const tabs = ref<TabsProp[]>([
// {
// key: 'all',
// name: '综合管理',
// },
// {
// key: 'street',
// name: '街面管理',
// },
// {
// key: 'community',
// name: '小区管理',
// },
// ])
// const options = ref(['日', '周', '月'])
// const curOption = ref('月')
// const rankList = ref([
// { name: '分类1', value: 50 },
// { name: '分类2', value: 31 },
// { name: '分类3', value: 15 },
// ])
// const placeList = ref<PlaceProp[]>([
// { name: '延安东路1292弄', value: 3, type: '路段' },
// { name: '延安东路1293弄', value: 5, type: '小区' },
// { name: '延安东路1294弄', value: 8, type: '商业' },
// ])
return {
tabs,
options,
curTab,
curOption,
rankList,
placeList,
......@@ -91,7 +148,7 @@ export default defineComponent({
display flex
align-items center
justify-content space-between
margin .05rem 0
margin 0.05rem 0
>div
width 75%
&:last-child
......@@ -99,20 +156,22 @@ export default defineComponent({
display flex
>span
$center()
width .22rem
width 0.22rem
height @width
color $primary-border
border .01rem solid @color
border 0.01rem solid @color
cursor pointer
&:hover
&.on
&:hover, &.on
color $secondary-color
border-color @color
background rgba(50,197,255,.2)
background rgba(50, 197, 255, 0.2)
.rank
flex 1
min-height 1rem
.content
height 1rem
overflow hidden
.place
margin .05rem 0
margin 0.05rem 0
.content
display flex
justify-content space-between
......
src/view/right/complain.vue
View file @ 674e54aa
......@@ -33,21 +33,17 @@
</div>
<div class="emergency">
<m-sub>紧急案件</m-sub>
<m-scroll :limit="1" :length="1" :step="1" mode="2">
<div
v-for="item in urgentCase.slice(0, 1)"
:key="item"
class="detail"
>
<div>
<m-scroll :limit="1" :length="urgentCase.length" :step="1" mode="2">
<div v-for="item in urgentCase" :key="item" class="detail">
<div class="title">
<p>
{{ item.managementType }}管理 · {{ item.businsessTypeLv1 }} ·
{{ item.source }}
</p>
<span>{{ item.address }}</span>
</div>
<div>
{{ item.reportContent }}
<div class="msg">
{{ item.reportContent || '暂无' }}
</div>
</div>
</m-scroll>
......@@ -61,6 +57,7 @@ import { defineComponent, ref, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue'
import { ECOption } from '@/components/MyComponent/MyChart/my-line.vue'
import moment from 'moment'
import store from '@/store'
export default defineComponent({
......@@ -72,15 +69,15 @@ export default defineComponent({
store.dispatch('GET_URGENTCASE', {
bxmaintainType: '1',
status_in: '待派遣,已派单',
acceptTime_gte: '2021-04-16',
pageSize: 110,
acceptTime_gte: moment(new Date()).format('YYYY-MM-DD'),
pageSize: 1000,
})
const rank = computed(() => store.state.yousubidaRank)
const classificationRank = computed(() => store.state.classificationRank)
const urgentCase = computed(() => store.state.urgentCase)
console.log(urgentCase)
// console.log(urgentCase)
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curTheme === 'manage')
......@@ -253,9 +250,9 @@ export default defineComponent({
.box
flex-direction column
display flex
height 100%
height 97%
.summary
height 8%
height 5%
display flex
justify-content space-between
align-items center
......@@ -272,15 +269,16 @@ export default defineComponent({
p
color #ccc
.manage
flex 1
display flex
height 60%
// height 60%
// margin-bottom .05rem
.content
flex 1
padding-left 0.1rem
.chart
width 100%
height 40%
height 44%
&.wrapper
display flex
>div
......@@ -308,7 +306,8 @@ export default defineComponent({
&:nth-of-type(5) > span
background #32C5FF
.emergency
height 25%
height 1.2rem
overflow hidden
// overflow hidden
.detail
display flex
......@@ -316,6 +315,8 @@ export default defineComponent({
padding 0.1rem
background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
margin-bottom 0.05rem
height 0.95rem
box-sizing border-box
>div
flex 1
&:first-child
......
src/view/right/demand.vue
View file @ 674e54aa
<template>
<m-card title="有求必应">
<div class="today-case">
<m-sub :addition="{ value: 157, unit: '件' }">今日案件数</m-sub>
<m-sub :addition="{ value: todayCase.totalNum, unit: '件' }">
今日案件数
</m-sub>
<Brief :list="summary" />
<div class="process">
<img src="@/assets/images/arrow.png" />
......@@ -35,18 +37,18 @@
</div>
<div class="case-follow">
<m-sub search-able @search="searchCase">事件跟踪</m-sub>
<m-scroll :limit="1" :length="caseList.length" :step="1.1" mode="2">
<div v-for="(item, i) in caseList" :key="i" class="detail">
<m-scroll :limit="1" :length="trackEvent.length" :step="1.1" mode="2">
<div v-for="(item, i) in trackEvent" :key="i" class="detail">
<div class="title">
<p>{{ item.name }}</p>
<p>{{ item.communityName || '暂无' }}</p>
<span />
<p>{{ item.type }}</p>
<p>{{ item.businsessTypeLv1 }}</p>
</div>
<div class="msg">
<p>{{ item.address }}</p>
<p>{{ item.date }}</p>
<p>{{ item.acceptTime }}</p>
</div>
<m-step :steps="steps" :current="item.cur" />
<m-step :steps="steps" :current="item.type" />
</div>
</m-scroll>
</div>
......@@ -60,56 +62,87 @@ import store from '@/store'
import icon6 from '@/assets/images/icon6.png'
import icon7 from '@/assets/images/icon7.png'
import icon8 from '@/assets/images/icon8.png'
import moment from 'moment'
export default defineComponent({
name: 'Demand',
components: { Brief },
setup() {
// dispatch('GET_TODAYCASE')
store.dispatch('GET_TODAYCASE')
store.dispatch('GET_STAGECASE')
store.dispatch('GET_WORKSTATION')
store.dispatch('GET_TRACKEVENT', {
status_in: '待处置,已签收',
acceptTime_gte: moment(new Date()).format('YYYY-MM-DD'),
pageSize: 1000,
})
const todayCase = computed(() => store.state.todayCase)
const stageCase = computed(() => store.state.stageCase)
const workstationKind = computed(() => store.state.workstationKind)
const trackEvent = computed(() => store.state.trackEvent)
// console.log(moment(new Date()).format('YYYY-MM-DD'))
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curTheme === 'manage')
const summary = ref<BriefProp[]>([
const summary = computed(() => {
return [
{
name: '综合管理',
value: [36, 468],
value: [
todayCase.value.comprehensiveDisposalNum || 0,
todayCase.value.comprehensiveNum || 0,
],
icon: icon6,
},
{
name: '街面管理',
value: [64, 261],
value: [
todayCase.value.streetDisposalNum || 0,
todayCase.value.streetNum || 0,
],
icon: icon7,
},
{
name: '小区管理',
value: [57, 154],
value: [
todayCase.value.communityDisposalNum || 0,
todayCase.value.communityNum || 0,
],
icon: icon8,
},
])
const process = ref([
]
})
const process = computed(() => {
return [
{
name: '发现',
value: 157,
value: stageCase.value.discoveryNum || 0,
},
{
name: '立案',
value: 106,
value: stageCase.value.recordNum || 0,
},
{
name: '派遣',
value: 95,
value: stageCase.value.dispatchNum || 0,
},
{
name: '结案',
value: 59,
value: stageCase.value.endNum || 0,
},
{
name: '检查',
value: 64,
value: stageCase.value.checkNum || 0,
},
{
name: '处置',
value: 86,
value: stageCase.value.disposalNum || 0,
},
])
]
})
const barData = ref({
dimensions: [
{ name: 'date', displayName: '日期' },
......@@ -145,26 +178,34 @@ export default defineComponent({
stack: '总量',
})),
})
const pieData = ref([
const pieData = computed(() => {
return [
{
name: '第一工作站',
value: 80,
num: 87,
value:
workstationKind.value.oneDisposalNum /
workstationKind.value.oneNum || 0,
num: workstationKind.value.oneDisposalNum || 0,
color: '#47B3FF',
},
{
name: '第二工作站',
value: 75,
num: 72,
value:
workstationKind.value.twoDisposalNum /
workstationKind.value.twoNum || 0,
num: workstationKind.value.twoDisposalNum || 0,
color: '#FF9D27',
},
{
name: '第三工作站',
value: 30,
num: 27,
value:
workstationKind.value.threeDisposalNum /
workstationKind.value.threeNum || 0,
num: workstationKind.value.threeDisposalNum || 0,
color: '#6EB629',
},
])
]
})
const pieSeries = pieData.value.map((item, i) => {
const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
const borderWidth = fontSize.value * 0.6
......@@ -205,36 +246,36 @@ export default defineComponent({
series: pieSeries,
})
const steps = ref(['发现', '立案', '派遣', '处置', '核查', '结案'])
const caseList = ref([
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 5,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 4,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 3,
},
{
name: '均乐小区',
type: '电梯困人',
address: '上海市黄浦区延安东路1292弄6~40号',
date: '2020-02-13 13:23:08',
cur: 2,
},
])
// const caseList = ref([
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 5,
// },
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 4,
// },
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 3,
// },
// {
// name: '均乐小区',
// type: '电梯困人',
// address: '上海市黄浦区延安东路1292弄6~40号',
// date: '2020-02-13 13:23:08',
// cur: 2,
// },
// ])
const searchCase = (key: string) => {
console.log('searck key: ', key)
}
......@@ -247,8 +288,10 @@ export default defineComponent({
pieData,
pieOption,
steps,
caseList,
// caseList,
searchCase,
todayCase,
trackEvent,
}
},
})
......@@ -259,7 +302,7 @@ export default defineComponent({
$arrow-style()
display block
content ''
width .2rem
width 0.2rem
height @width
background url('@/assets/images/arrow.png') 100% / 100% 100% no-repeat
position absolute
......@@ -269,11 +312,11 @@ $arrow-style()
margin auto
transform translate(-90%, 0)
.process
margin-top .1rem
margin-top 0.1rem
position relative
>img
position absolute
width .2rem
width 0.2rem
height @width
right 13.3%
top 0
......@@ -284,7 +327,7 @@ $arrow-style()
display flex
align-items center
justify-content space-around
margin-bottom .15rem
margin-bottom 0.15rem
&:nth-of-type(1)
div+div
&::before
......@@ -297,15 +340,14 @@ $arrow-style()
>div
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
width 28%
padding .05rem 0
padding 0.05rem 0
text-align center
font-weight bold
position relative
.count
font-size .12rem
font-size 0.12rem
p
color #ccc
.chart
width 100%
height 1.1rem
......@@ -321,13 +363,13 @@ $arrow-style()
p
display flex
align-items center
margin-bottom .05rem
margin-bottom 0.05rem
span
display inline-block
width .06rem
width 0.06rem
height @width
border-radius 50%
margin-right .1rem
margin-right 0.1rem
.case-follow
height 1.2rem
overflow hidden
......@@ -335,28 +377,28 @@ $arrow-style()
display flex
flex-direction column
justify-content space-between
padding .1rem
padding 0.1rem
background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat
height 1rem
margin-bottom .1rem
margin-bottom 0.1rem
box-sizing border-box
.title
display flex
align-items center
p
font-size .12rem
font-size 0.12rem
&:last-child
color $edge
font-size .1rem
font-size 0.1rem
span
display block
height .01rem
height 0.01rem
background $blue
flex 1
margin 0 .1rem
margin 0 0.1rem
.msg
$center()
justify-content space-between
color $blue
font-size .08rem
font-size 0.08rem
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment