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 {
).data
// console.log(content, '有求必应 - 工作站分类')
commit('SET_WORKSTATION', content)
commit('SET_WORKSTATION_PIEDATA', content[0].statistical)
},
async GET_TRACKEVENT(
{
......
......@@ -115,7 +115,8 @@ export interface GlobalStateProps {
urgentCase: any[]
todayCase: { [key: string]: number }
stageCase: { [key: string]: number }
workstationKind: { [key: string]: number }
workstationKind: any[]
workstationKindPiEData: { [key: string]: number }
trackEvent: any[]
analysisRank: Partial<DutyDataProp>
moreHappenAddr: Partial<DutyDataProp>
......
......@@ -225,11 +225,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 }
): void {
state.workstationKind = data
state.workstationKindPiEData = data
},
// 有求必应-事件跟踪
SET_TRACKEVENT(state: GlobalStateProps, data: unknown[]): void {
......
......@@ -215,7 +215,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,10 +83,8 @@ 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'))
const fontSize = computed(() => Math.floor((screen.height * 1.6) / 100))
const showChart = computed(() => store.state.curTheme === 'manage')
const summary = computed(() => {
......@@ -203,64 +203,39 @@ export default defineComponent({
})),
})
const pieData = computed(() => {
if (workstationKind.value[0]) {
return [
{
name: '第一工作站',
value:
(
(workstationKind.value[0].statistical.oneDisposalNum /
workstationKind.value[0].statistical.oneNum) *
parseInt(
(pieDatamodel.value.oneDisposalNum / pieDatamodel.value.oneNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.oneDisposalNum || 0,
) || 0,
num: pieDatamodel.value.oneNum,
color: '#47B3FF',
},
{
name: '第二工作站',
value:
(
(workstationKind.value[0].statistical.twoDisposalNum /
workstationKind.value[0].statistical.twoNum) *
parseInt(
(pieDatamodel.value.twoDisposalNum / pieDatamodel.value.twoNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.twoDisposalNum || 0,
) || 0,
num: pieDatamodel.value.twoNum,
color: '#FF9D27',
},
{
name: '第三工作站',
value:
(
(workstationKind.value[0].statistical.threeDisposalNum /
workstationKind.value[0].statistical.threeNum) *
parseInt(
(pieDatamodel.value.threeDisposalNum /
pieDatamodel.value.threeNum) *
100
).toFixed(0) || 0,
num: workstationKind.value[0].statistical.threeDisposalNum || 0,
) || 0,
num: pieDatamodel.value.threeNum,
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 rate = Math.round((pieData.value.length - i) * fontSize.value) + 10
......@@ -306,6 +281,7 @@ export default defineComponent({
const searchCase = (key: string) => {
console.log('searck key: ', key)
}
return {
summary,
showChart,
......@@ -319,6 +295,7 @@ export default defineComponent({
searchCase,
todayCase,
trackEvent,
workstationKind,
}
},
})
......@@ -338,7 +315,8 @@ $arrow-style()
bottom 0
margin auto
transform translate(-90%, 0)
.process
.today-case
.process
margin-top 0.1rem
position relative
>img
......@@ -375,7 +353,7 @@ $arrow-style()
font-size 0.12rem
p
color #ccc
.chart
.chart
width 100%
height 1.1rem
&.wrapper
......@@ -384,12 +362,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>
......@@ -76,7 +76,7 @@ export default defineComponent({
const maskImage = new Image()
maskImage.src = symbolUrl
const option = {
backgroundColor: 'rgba(0,0,0,0.1)',
backgroundColor: '#000',
tooltip: {
show: true,
},
......@@ -101,14 +101,13 @@ export default defineComponent({
name: 'pictorial',
silent: true,
symbol: 'image://' + symbolUrl, //按背景渲染云词
symbolSize: ['165%', '180%'],
symbolSize: ['100%', '100%'],
symbolPosition: 'center',
barWidth: '100%',
barMaxWidth: '100%',
itemStyle: {
normal: {
opacity: 0.2, //自己项目中这里可以设置0全透明,然后可以写一个div背景加载一个美化过的云图片,重合放在这个图表下面。
},
border: '1px solid red',
},
data: [
{
......@@ -118,30 +117,28 @@ export default defineComponent({
},
{
type: 'wordCloud',
sizeRange: [19, 23],
rotationRange: [0, 10],
sizeRange: [20, 22],
rotationRange: [0, 0],
maskImage: maskImage,
textPadding: 30,
gridSize: 20, //用于标记画布可用性的网格大小(以像素为单位)//字距越大,字距越大。
width: '90%',
height: '90%',
left: 'center',
top: 'center',
textPadding: 0,
gridSize: 39, //用于标记画布可用性的网格大小(以像素为单位)//字距越大,字距越大。
width: '100%',
height: '100%',
left: '0',
top: '0',
drawOutOfBound: false,
textStyle: {
normal: {
fontFamily: 'sans-serif',
// fontFamily: 'sans-serif',
fontWeight: 600,
color: function () {
const index = Math.floor(Math.random() * colorList.length)
return colorList[index]
},
},
},
data: data,
},
],
}
cloudCharts.setOption(option)
}
......@@ -151,7 +148,7 @@ export default defineComponent({
if (!type) return
setTimeout(() => {
init()
}, 1000)
}, 1900)
},
{ immediate: true }
)
......@@ -164,9 +161,11 @@ export default defineComponent({
<style lang="stylus" scoped>
.box
height 95%
height 2rem
width 100%
box-sizing border-box
overflow hidden
// background #000
#cloud
height 2rem
width 100%
</style>
......@@ -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