Skip to content

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

公共管理饼图调整

parent b0fde650
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 4720 deletions
package-lock.json
View file @ 4ba9f9e5
This source diff could not be displayed because it is too large. You can view the blob instead.
src/store/actions.ts
View file @ 4ba9f9e5
......@@ -532,6 +532,7 @@ export default {
).data
// console.log(content, '有求必应 - 工作站分类')
commit('SET_WORKSTATION', content)
commit('SET_WORKSTATION_PIEDATA', content[0].statistical)
},
async GET_TRACKEVENT(
{
......
src/store/index.ts
View file @ 4ba9f9e5
......@@ -114,7 +114,8 @@ export interface GlobalStateProps {
urgentCase: any[]
todayCase: { [key: string]: number }
stageCase: { [key: string]: number }
workstationKind: { [key: string]: number }
workstationKind: any[]
workstationKindPiEData: { [key: string]: any }
trackEvent: any[]
analysisRank: Partial<DutyDataProp>
moreHappenAddr: Partial<DutyDataProp>
......
src/store/mutations.ts
View file @ 4ba9f9e5
......@@ -222,11 +222,14 @@ export default {
state.stageCase = data
},
// 有求必应-工作站分类
SET_WORKSTATION(
SET_WORKSTATION(state: GlobalStateProps, data: any[]): void {
state.workstationKind = data
},
SET_WORKSTATION_PIEDATA(
state: GlobalStateProps,
data: { [key: string]: number }
data: { [key: string]: any }
): void {
state.workstationKind = data
state.workstationKindPiEData = data
},
// 有求必应-事件跟踪
SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {
......
src/store/state.ts
View file @ 4ba9f9e5
......@@ -209,7 +209,8 @@ export default {
urgentCase: [],
todayCase: {},
stageCase: {},
workstationKind: {},
workstationKind: [],
workstationKindPiEData: {},
trackEvent: [],
analysisRank: { day: [], week: [], month: [] },
moreHappenAddr: { day: [], week: [], month: [] },
......
src/view/right/case-analysis.vue
View file @ 4ba9f9e5
<template>
<m-card title="案件分析">
<m-card title="案件分析" class="box">
<div class="nav">
<div>
<Tabs :list="tabs" horizontal @select="curTab = $event" />
......@@ -111,38 +111,42 @@ export default defineComponent({
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.nav
width 100%
display flex
align-items center
justify-content space-between
margin 0.05rem 0
>div
width 75%
&:last-child
width 20%
display flex
>span
$center()
width 0.22rem
height @width
color $primary-border
border 0.01rem solid @color
cursor pointer
&:hover, &.on
color $secondary-color
border-color @color
background rgba(50, 197, 255, 0.2)
.rank
.box
overflow hidden
.content
height 1rem
.nav
width 100%
overflow hidden
.place
margin 0.05rem 0
.content
display flex
align-items center
justify-content space-between
margin-top 0.05rem
>div
width 32%
width 75%
&:last-child
width 20%
display flex
>span
$center()
width 0.22rem
height @width
color $primary-border
border 0.01rem solid @color
cursor pointer
&:hover, &.on
color $secondary-color
border-color @color
background rgba(50, 197, 255, 0.2)
.rank
overflow hidden
// height 1rem
.content
height 1.2rem
overflow hidden
.place
overflow hidden
.content
display flex
justify-content space-between
>div
width 32%
</style>
src/view/right/complain.vue
View file @ 4ba9f9e5
......@@ -254,87 +254,87 @@ export default defineComponent({
.box
flex-direction column
display flex
height 97%
.summary
height 5%
display flex
justify-content space-between
align-items center
margin-top 0.1rem
margin-bottom 0.1rem
>div
height 95%
overflow hidden
.summary
height 5%
display flex
justify-content space-between
align-items center
margin-top 0.1rem
margin-bottom 0.1rem
>div
margin-left 0.05rem
.count
font-size 0.12rem
font-weight bold
p
color #ccc
.manage
flex 1
display flex
// height 60%
// margin-bottom .05rem
.content
flex 1
padding-left 0.1rem
.chart
width 100%
height 44%
&.wrapper
display flex
>div
width 50%
height 100%
&:last-child
$center()
flex-direction column
p
display flex
align-items center
width 100%
i
display inline-block
width 0.06rem
height @width
border-radius 50%
margin-right 0.1rem
background #826AFA
&:nth-of-type(2) > i
background #E02020
&:nth-of-type(3) > i
background #F7B500
&:nth-of-type(4) > i
background #6DD400
&:nth-of-type(5) > i
background #32C5FF
span
flex 4
&:last-child
flex 1
.emergency
height 1.2rem
overflow hidden
// overflow hidden
.detail
display flex
align-items center
>div
margin-left 0.05rem
.count
font-size 0.12rem
font-weight bold
p
color #ccc
.manage
display flex
flex-direction column
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
height 70%
// margin-bottom .05rem
.content
flex 1
&:first-child
border-bottom 0.01rem solid $primary-border
padding-bottom 0.05rem
margin-bottom @padding-bottom
span
color #ccc
p
font-size 0.12rem
font-weight bold
padding-left 0.1rem
.chart
width 100%
height 44%
&.wrapper
display flex
>div
width 50%
height 100%
&:last-child
$center()
flex-direction column
p
display flex
align-items center
width 100%
i
display inline-block
width 0.06rem
height @width
border-radius 50%
margin-right 0.1rem
background #826AFA
&:nth-of-type(2) > i
background #E02020
&:nth-of-type(3) > i
background #F7B500
&:nth-of-type(4) > i
background #6DD400
&:nth-of-type(5) > i
background #32C5FF
span
flex 4
&:last-child
flex 1
.emergency
height 1.2rem
overflow hidden
// overflow hidden
.detail
display flex
flex-direction column
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
border-bottom 0.01rem solid $primary-border
padding-bottom 0.05rem
margin-bottom @padding-bottom
span
color #ccc
p
font-size 0.12rem
font-weight bold
</style>
src/view/right/demand.vue
View file @ 4ba9f9e5
......@@ -25,12 +25,14 @@
</div>
<div class="chart wrapper">
<div v-if="showChart">
<m-pie :option="pieOption" />
<m-pie :option="pieOption" :dataset="pieData" />
</div>
<div>
<p v-for="item in pieData" :key="item.name">
<span :style="{ background: item.color }" />
{{ item.name }}： {{ item.value }}% &nbsp;&nbsp;{{ item.num }}
{{ item.name }}： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
item.value
}}% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.num }}
</p>
</div>
</div>
......@@ -56,7 +58,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { computed, defineComponent, watch, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store'
import icon6 from '@/assets/images/icon6.png'
......@@ -81,6 +83,7 @@ export default defineComponent({
const todayCase = computed(() => store.state.todayCase)
const stageCase = computed(() => store.state.stageCase)
const workstationKind = computed(() => store.state.workstationKind)
const pieDatamodel = computed(() => store.state.workstationKindPiEData)
const trackEvent = computed(() => store.state.trackEvent)
// console.log(moment(new Date()).format('YYYY-MM-DD'))
......@@ -203,64 +206,28 @@ export default defineComponent({
})),
})
const pieData = computed(() => {
if (workstationKind.value[0]) {
return [
{
name: '第一工作站',
value:
(
(workstationKind.value[0].statistical.oneDisposalNum /
workstationKind.value[0].statistical.oneNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.oneDisposalNum || 0,
color: '#47B3FF',
},
{
name: '第二工作站',
value:
(
(workstationKind.value[0].statistical.twoDisposalNum /
workstationKind.value[0].statistical.twoNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.twoDisposalNum || 0,
color: '#FF9D27',
},
{
name: '第三工作站',
value:
(
(workstationKind.value[0].statistical.threeDisposalNum /
workstationKind.value[0].statistical.threeNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.threeDisposalNum || 0,
color: '#6EB629',
},
]
} else {
return [
{
name: '第一工作站',
value: 0,
num: 0,
color: '#47B3FF',
},
{
name: '第二工作站',
value: 0,
num: 0,
color: '#FF9D27',
},
{
name: '第三工作站',
value: 0,
num: 0,
color: '#6EB629',
},
]
}
console.log(pieDatamodel.value)
return [
{
name: '第一工作站',
value: 8,
num: pieDatamodel.value.oneNum,
color: '#47B3FF',
},
{
name: '第二工作站',
value: 9,
num: pieDatamodel.value.twoNum,
color: '#FF9D27',
},
{
name: '第三工作站',
value: 8,
num: pieDatamodel.value.threeNum,
color: '#6EB629',
},
]
})
const pieSeries = pieData.value.map((item, i) => {
const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
......@@ -306,6 +273,50 @@ export default defineComponent({
const searchCase = (key: string) => {
console.log('searck key: ', key)
}
// watch(
// [() => workstationKind.value, () => showChart.value],
// ([arr, show]) => {
// if (!show) return
// if (arr[0]) {
// pieData.value = [
// {
// name: '第一工作站',
// value:
// (
// (arr[0].statistical.oneDisposalNum /
// arr[0].statistical.oneNum) *
// 100
// ).toFixed(0) || 0,
// num: arr[0].statistical.oneDisposalNum,
// color: '#47B3FF',
// },
// {
// name: '第二工作站',
// value:
// (
// (arr[0].statistical.twoDisposalNum /
// arr[0].statistical.twoNum) *
// 100
// ).toFixed(0) || 0,
// num: arr[0].statistical.twoNum,
// color: '#FF9D27',
// },
// {
// name: '第三工作站',
// value:
// (
// (arr[0].statistical.threeDisposalNum /
// arr[0].statistical.threeNum) *
// 100
// ).toFixed(0) || 0,
// num: arr[0].statistical.threeDisposalNum,
// color: '#6EB629',
// },
// ]
// }
// },
// { immediate: true }
// )
return {
summary,
showChart,
......@@ -319,6 +330,7 @@ export default defineComponent({
searchCase,
todayCase,
trackEvent,
workstationKind,
}
},
})
......@@ -338,65 +350,69 @@ $arrow-style()
bottom 0
margin auto
transform translate(-90%, 0)
.process
margin-top 0.1rem
position relative
>img
position absolute
width 0.2rem
height @width
right 13.3%
top 0
bottom 0
margin auto
transform rotate(90deg)
>div
display flex
align-items center
justify-content space-around
margin-bottom 0.15rem
&:nth-of-type(1)
div+div
&::before
$arrow-style()
&:nth-of-type(2)
div+div
&::before
$arrow-style()
transform translate(-90%, 0) rotate(180deg)
.today-case
.process
margin-top 0.1rem
position relative
>img
position absolute
width 0.2rem
height @width
right 13.3%
top 0
bottom 0
margin auto
transform rotate(90deg)
>div
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
width 28%
padding 0.05rem 0
text-align center
font-weight bold
position relative
.count
font-size 0.12rem
p
color #ccc
.chart
width 100%
height 1.1rem
&.wrapper
display flex
>div
width 50%
height 100%
font-weight bold
&:last-child
$center()
flex-direction column
display flex
align-items center
justify-content space-around
margin-bottom 0.15rem
&:nth-of-type(1)
div+div
&::before
$arrow-style()
&:nth-of-type(2)
div+div
&::before
$arrow-style()
transform translate(-90%, 0) rotate(180deg)
>div
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
width 28%
padding 0.05rem 0
text-align center
font-weight bold
position relative
.count
font-size 0.12rem
p
display flex
align-items center
margin-bottom 0.05rem
span
display inline-block
width 0.06rem
height @width
border-radius 50%
margin-right 0.1rem
color #ccc
.chart
width 100%
height 1.1rem
&.wrapper
display flex
>div
width 50%
height 100%
font-weight bold
// border 1px solid red
&:last-child
$center()
flex-direction column
p
display flex
width 100%
align-items center
// border 1px solid red
margin-bottom 0.05rem
span
display inline-block
width 0.06rem
height @width
border-radius 50%
margin-right 0.1rem
.case-follow
height 1.2rem
overflow hidden
......
src/view/right/key-task.vue
View file @ 4ba9f9e5
<template>
<m-card title="重点工作">
<div v-if="showChart" id="cloud" class="box"></div>
<m-card title="重点工作" class="box">
<div v-if="showChart" id="cloud" class=""></div>
</m-card>
</template>
......@@ -164,7 +164,7 @@ export default defineComponent({
<style lang="stylus" scoped>
.box
height 95%
height 2rem
width 100%
box-sizing border-box
overflow hidden
......
src/view/right/public-manage.vue
View file @ 4ba9f9e5
......@@ -39,8 +39,10 @@ export default defineComponent({
width 33%
.first-child
flex 1
// height 50%
.second-child
height 2rem
// height 32%
.third-child
height 0.8rem
</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