Commit 1bab2f2a authored by 郭铭瑶's avatar 郭铭瑶 🤘
parents 743a138d d0d62fa9
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -532,6 +532,7 @@ export default { ...@@ -532,6 +532,7 @@ export default {
).data ).data
// console.log(content, '有求必应 - 工作站分类') // console.log(content, '有求必应 - 工作站分类')
commit('SET_WORKSTATION', content) commit('SET_WORKSTATION', content)
commit('SET_WORKSTATION_PIEDATA', content[0].statistical)
}, },
async GET_TRACKEVENT( async GET_TRACKEVENT(
{ {
......
...@@ -115,7 +115,8 @@ export interface GlobalStateProps { ...@@ -115,7 +115,8 @@ export interface GlobalStateProps {
urgentCase: any[] urgentCase: any[]
todayCase: { [key: string]: number } todayCase: { [key: string]: number }
stageCase: { [key: string]: number } stageCase: { [key: string]: number }
workstationKind: { [key: string]: number } workstationKind: any[]
workstationKindPiEData: { [key: string]: number }
trackEvent: any[] trackEvent: any[]
analysisRank: Partial<DutyDataProp> analysisRank: Partial<DutyDataProp>
moreHappenAddr: Partial<DutyDataProp> moreHappenAddr: Partial<DutyDataProp>
......
...@@ -225,11 +225,14 @@ export default { ...@@ -225,11 +225,14 @@ export default {
state.stageCase = data state.stageCase = data
}, },
// 有求必应-工作站分类 // 有求必应-工作站分类
SET_WORKSTATION( SET_WORKSTATION(state: GlobalStateProps, data: any[]): void {
state.workstationKind = data
},
SET_WORKSTATION_PIEDATA(
state: GlobalStateProps, state: GlobalStateProps,
data: { [key: string]: number } data: { [key: string]: number }
): void { ): void {
state.workstationKind = data state.workstationKindPiEData = data
}, },
// 有求必应-事件跟踪 // 有求必应-事件跟踪
SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void { SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {
......
...@@ -215,7 +215,8 @@ export default { ...@@ -215,7 +215,8 @@ export default {
urgentCase: [], urgentCase: [],
todayCase: {}, todayCase: {},
stageCase: {}, stageCase: {},
workstationKind: {}, workstationKind: [],
workstationKindPiEData: {},
trackEvent: [], trackEvent: [],
analysisRank: { day: [], week: [], month: [] }, analysisRank: { day: [], week: [], month: [] },
moreHappenAddr: { day: [], week: [], month: [] }, moreHappenAddr: { day: [], week: [], month: [] },
......
<template> <template>
<m-card title="案件分析"> <m-card title="案件分析" class="box">
<div class="nav"> <div class="nav">
<div> <div>
<Tabs :list="tabs" horizontal @select="curTab = $event" /> <Tabs :list="tabs" horizontal @select="curTab = $event" />
...@@ -111,38 +111,42 @@ export default defineComponent({ ...@@ -111,38 +111,42 @@ export default defineComponent({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl' @import '../../components/MyComponent/main.styl'
.nav .box
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
overflow hidden overflow hidden
.content .nav
height 1rem width 100%
overflow hidden overflow hidden
.place
margin 0.05rem 0
.content
display flex display flex
align-items center
justify-content space-between justify-content space-between
margin-top 0.05rem
>div >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> </style>
...@@ -254,87 +254,87 @@ export default defineComponent({ ...@@ -254,87 +254,87 @@ export default defineComponent({
.box .box
flex-direction column flex-direction column
display flex display flex
height 97% height 95%
.summary overflow hidden
height 5% .summary
display flex height 5%
justify-content space-between
align-items center
margin-top 0.1rem
margin-bottom 0.1rem
>div
display flex display flex
justify-content space-between
align-items center align-items center
margin-top 0.1rem
margin-bottom 0.1rem
>div >div
margin-left 0.05rem display flex
.count align-items center
font-size 0.12rem >div
font-weight bold margin-left 0.05rem
p .count
color #ccc font-size 0.12rem
.manage font-weight bold
flex 1 p
display flex color #ccc
// height 60% .manage
// 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 display flex
flex-direction column height 70%
padding 0.1rem // margin-bottom .05rem
background url('@/assets/images/border2.png') 100% / 100% 100% no-repeat .content
margin-bottom 0.05rem
height 0.95rem
box-sizing border-box
>div
flex 1 flex 1
&:first-child padding-left 0.1rem
border-bottom 0.01rem solid $primary-border .chart
padding-bottom 0.05rem width 100%
margin-bottom @padding-bottom height 44%
span &.wrapper
color #ccc display flex
p >div
font-size 0.12rem width 50%
font-weight bold 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> </style>
...@@ -25,12 +25,14 @@ ...@@ -25,12 +25,14 @@
</div> </div>
<div class="chart wrapper"> <div class="chart wrapper">
<div v-if="showChart"> <div v-if="showChart">
<m-pie :option="pieOption" /> <m-pie :option="pieOption" :dataset="pieData" />
</div> </div>
<div> <div>
<p v-for="item in pieData" :key="item.name"> <p v-for="item in pieData" :key="item.name">
<span :style="{ background: item.color }" /> <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> </p>
</div> </div>
</div> </div>
...@@ -56,7 +58,7 @@ ...@@ -56,7 +58,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue' import { computed, defineComponent, watch, ref } from 'vue'
import Brief, { BriefProp } from '../components/brief.vue' import Brief, { BriefProp } from '../components/brief.vue'
import store from '@/store' import store from '@/store'
import icon6 from '@/assets/images/icon6.png' import icon6 from '@/assets/images/icon6.png'
...@@ -81,10 +83,8 @@ export default defineComponent({ ...@@ -81,10 +83,8 @@ export default defineComponent({
const todayCase = computed(() => store.state.todayCase) const todayCase = computed(() => store.state.todayCase)
const stageCase = computed(() => store.state.stageCase) const stageCase = computed(() => store.state.stageCase)
const workstationKind = computed(() => store.state.workstationKind) const workstationKind = computed(() => store.state.workstationKind)
const pieDatamodel = computed(() => store.state.workstationKindPiEData)
const trackEvent = computed(() => store.state.trackEvent) 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 fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curTheme === 'manage') const showChart = computed(() => store.state.curTheme === 'manage')
const summary = computed(() => { const summary = computed(() => {
...@@ -203,64 +203,39 @@ export default defineComponent({ ...@@ -203,64 +203,39 @@ export default defineComponent({
})), })),
}) })
const pieData = computed(() => { const pieData = computed(() => {
if (workstationKind.value[0]) { return [
return [ {
{ name: '第一工作站',
name: '第一工作站', value:
value: parseInt(
( (pieDatamodel.value.oneDisposalNum / pieDatamodel.value.oneNum) *
(workstationKind.value[0].statistical.oneDisposalNum /
workstationKind.value[0].statistical.oneNum) *
100 100
).toFixed(0) || 0, ) || 0,
num: workstationKind.value[0].statistical.oneDisposalNum || 0, num: pieDatamodel.value.oneNum,
color: '#47B3FF', color: '#47B3FF',
}, },
{ {
name: '第二工作站', name: '第二工作站',
value: value:
( parseInt(
(workstationKind.value[0].statistical.twoDisposalNum / (pieDatamodel.value.twoDisposalNum / pieDatamodel.value.twoNum) *
workstationKind.value[0].statistical.twoNum) *
100 100
).toFixed(0) || 0, ) || 0,
num: workstationKind.value[0].statistical.twoDisposalNum || 0, num: pieDatamodel.value.twoNum,
color: '#FF9D27', color: '#FF9D27',
}, },
{ {
name: '第三工作站', name: '第三工作站',
value: value:
( parseInt(
(workstationKind.value[0].statistical.threeDisposalNum / (pieDatamodel.value.threeDisposalNum /
workstationKind.value[0].statistical.threeNum) * pieDatamodel.value.threeNum) *
100 100
).toFixed(0) || 0, ) || 0,
num: workstationKind.value[0].statistical.threeDisposalNum || 0, num: pieDatamodel.value.threeNum,
color: '#6EB629', 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',
},
]
}
}) })
const pieSeries = pieData.value.map((item, i) => { const pieSeries = pieData.value.map((item, i) => {
const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10 const rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
...@@ -306,6 +281,7 @@ export default defineComponent({ ...@@ -306,6 +281,7 @@ export default defineComponent({
const searchCase = (key: string) => { const searchCase = (key: string) => {
console.log('searck key: ', key) console.log('searck key: ', key)
} }
return { return {
summary, summary,
showChart, showChart,
...@@ -319,6 +295,7 @@ export default defineComponent({ ...@@ -319,6 +295,7 @@ export default defineComponent({
searchCase, searchCase,
todayCase, todayCase,
trackEvent, trackEvent,
workstationKind,
} }
}, },
}) })
...@@ -338,65 +315,69 @@ $arrow-style() ...@@ -338,65 +315,69 @@ $arrow-style()
bottom 0 bottom 0
margin auto margin auto
transform translate(-90%, 0) transform translate(-90%, 0)
.process .today-case
margin-top 0.1rem .process
position relative margin-top 0.1rem
>img position relative
position absolute >img
width 0.2rem position absolute
height @width width 0.2rem
right 13.3% height @width
top 0 right 13.3%
bottom 0 top 0
margin auto bottom 0
transform rotate(90deg) margin auto
>div transform rotate(90deg)
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 >div
background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat display flex
width 28% align-items center
padding 0.05rem 0 justify-content space-around
text-align center margin-bottom 0.15rem
font-weight bold &:nth-of-type(1)
position relative div+div
.count &::before
font-size 0.12rem $arrow-style()
p &:nth-of-type(2)
color #ccc div+div
.chart &::before
width 100% $arrow-style()
height 1.1rem transform translate(-90%, 0) rotate(180deg)
&.wrapper >div
display flex background url('@/assets/images/num-card.png') 100% / 100% 100% no-repeat
>div width 28%
width 50% padding 0.05rem 0
height 100% text-align center
font-weight bold font-weight bold
&:last-child position relative
$center() .count
flex-direction column font-size 0.12rem
p p
display flex color #ccc
align-items center .chart
margin-bottom 0.05rem width 100%
span height 1.1rem
display inline-block &.wrapper
width 0.06rem display flex
height @width >div
border-radius 50% width 50%
margin-right 0.1rem 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 .case-follow
height 1.2rem height 1.2rem
overflow hidden overflow hidden
......
<template> <template>
<m-card title="重点工作"> <m-card title="重点工作" class="box">
<div v-if="showChart" id="cloud" class="box"></div> <div v-if="showChart" id="cloud" class=""></div>
</m-card> </m-card>
</template> </template>
...@@ -76,7 +76,7 @@ export default defineComponent({ ...@@ -76,7 +76,7 @@ export default defineComponent({
const maskImage = new Image() const maskImage = new Image()
maskImage.src = symbolUrl maskImage.src = symbolUrl
const option = { const option = {
backgroundColor: 'rgba(0,0,0,0.1)', backgroundColor: '#000',
tooltip: { tooltip: {
show: true, show: true,
}, },
...@@ -101,14 +101,13 @@ export default defineComponent({ ...@@ -101,14 +101,13 @@ export default defineComponent({
name: 'pictorial', name: 'pictorial',
silent: true, silent: true,
symbol: 'image://' + symbolUrl, //按背景渲染云词 symbol: 'image://' + symbolUrl, //按背景渲染云词
symbolSize: ['165%', '180%'], symbolSize: ['100%', '100%'],
symbolPosition: 'center', symbolPosition: 'center',
barWidth: '100%', barWidth: '100%',
barMaxWidth: '100%', barMaxWidth: '100%',
itemStyle: { itemStyle: {
normal: { opacity: 0.2, //自己项目中这里可以设置0全透明,然后可以写一个div背景加载一个美化过的云图片,重合放在这个图表下面。
opacity: 0.2, //自己项目中这里可以设置0全透明,然后可以写一个div背景加载一个美化过的云图片,重合放在这个图表下面。 border: '1px solid red',
},
}, },
data: [ data: [
{ {
...@@ -118,30 +117,28 @@ export default defineComponent({ ...@@ -118,30 +117,28 @@ export default defineComponent({
}, },
{ {
type: 'wordCloud', type: 'wordCloud',
sizeRange: [19, 23], sizeRange: [20, 22],
rotationRange: [0, 10], rotationRange: [0, 0],
maskImage: maskImage, maskImage: maskImage,
textPadding: 30, textPadding: 0,
gridSize: 20, //用于标记画布可用性的网格大小(以像素为单位)//字距越大,字距越大。 gridSize: 39, //用于标记画布可用性的网格大小(以像素为单位)//字距越大,字距越大。
width: '90%', width: '100%',
height: '90%', height: '100%',
left: 'center', left: '0',
top: 'center', top: '0',
drawOutOfBound: false, drawOutOfBound: false,
textStyle: { textStyle: {
normal: { // fontFamily: 'sans-serif',
fontFamily: 'sans-serif', fontWeight: 600,
color: function () { color: function () {
const index = Math.floor(Math.random() * colorList.length) const index = Math.floor(Math.random() * colorList.length)
return colorList[index] return colorList[index]
},
}, },
}, },
data: data, data: data,
}, },
], ],
} }
cloudCharts.setOption(option) cloudCharts.setOption(option)
} }
...@@ -151,7 +148,7 @@ export default defineComponent({ ...@@ -151,7 +148,7 @@ export default defineComponent({
if (!type) return if (!type) return
setTimeout(() => { setTimeout(() => {
init() init()
}, 1000) }, 1900)
}, },
{ immediate: true } { immediate: true }
) )
...@@ -164,9 +161,11 @@ export default defineComponent({ ...@@ -164,9 +161,11 @@ export default defineComponent({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.box .box
height 95% height 2rem
width 100% width 100%
box-sizing border-box box-sizing border-box
overflow hidden overflow hidden
// background #000 #cloud
height 2rem
width 100%
</style> </style>
...@@ -39,8 +39,10 @@ export default defineComponent({ ...@@ -39,8 +39,10 @@ export default defineComponent({
width 33% width 33%
.first-child .first-child
flex 1 flex 1
// height 50%
.second-child .second-child
height 2rem height 2rem
// height 32%
.third-child .third-child
height 0.8rem height 0.8rem
</style> </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