Commit 4ba9f9e5 authored by 程卓's avatar 程卓

公共管理饼图调整

parent b0fde650
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -532,6 +532,7 @@ export default {
).data
// console.log(content, '有求必应 - 工作站分类')
commit('SET_WORKSTATION', content)
commit('SET_WORKSTATION_PIEDATA', content[0].statistical)
},
async GET_TRACKEVENT(
{
......
......@@ -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>
......
......@@ -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 {
......
......@@ -209,7 +209,8 @@ export default {
urgentCase: [],
todayCase: {},
stageCase: {},
workstationKind: {},
workstationKind: [],
workstationKindPiEData: {},
trackEvent: [],
analysisRank: { day: [], week: [], month: [] },
moreHappenAddr: { day: [], week: [], month: [] },
......
<template>
<m-card title="案件分析">
<m-card title="案件分析" class="box">
<div class="nav">
<div>
<Tabs :list="tabs" horizontal @select="curTab = $event" />
......@@ -111,12 +111,15 @@ export default defineComponent({
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.nav
.box
overflow hidden
.nav
width 100%
overflow hidden
display flex
align-items center
justify-content space-between
margin 0.05rem 0
margin-top 0.05rem
>div
width 75%
&:last-child
......@@ -133,13 +136,14 @@ export default defineComponent({
color $secondary-color
border-color @color
background rgba(50, 197, 255, 0.2)
.rank
.rank
overflow hidden
// height 1rem
.content
height 1rem
height 1.2rem
overflow hidden
.place
overflow hidden
.place
margin 0.05rem 0
.content
display flex
justify-content space-between
......
......@@ -254,8 +254,9 @@ export default defineComponent({
.box
flex-direction column
display flex
height 97%
.summary
height 95%
overflow hidden
.summary
height 5%
display flex
justify-content space-between
......@@ -272,10 +273,9 @@ export default defineComponent({
font-weight bold
p
color #ccc
.manage
flex 1
.manage
display flex
// height 60%
height 70%
// margin-bottom .05rem
.content
flex 1
......@@ -314,7 +314,7 @@ export default defineComponent({
flex 4
&:last-child
flex 1
.emergency
.emergency
height 1.2rem
overflow hidden
// overflow hidden
......
......@@ -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 {
console.log(pieDatamodel.value)
return [
{
name: '第一工作站',
value: 0,
num: 0,
value: 8,
num: pieDatamodel.value.oneNum,
color: '#47B3FF',
},
{
name: '第二工作站',
value: 0,
num: 0,
value: 9,
num: pieDatamodel.value.twoNum,
color: '#FF9D27',
},
{
name: '第三工作站',
value: 0,
num: 0,
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,7 +350,8 @@ $arrow-style()
bottom 0
margin auto
transform translate(-90%, 0)
.process
.today-case
.process
margin-top 0.1rem
position relative
>img
......@@ -375,7 +388,7 @@ $arrow-style()
font-size 0.12rem
p
color #ccc
.chart
.chart
width 100%
height 1.1rem
&.wrapper
......@@ -384,12 +397,15 @@ $arrow-style()
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
......
<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
......
......@@ -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