1263 lines
34 KiB
Vue
1263 lines
34 KiB
Vue
<template>
|
|
<div class="AppPdDv">
|
|
<div class="left">
|
|
<div class="appPdDv-title">企微数据库</div>
|
|
<div class="tab">
|
|
<div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']" @click="leftIndex = 0">群员统计</div>
|
|
<div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']" @click="leftIndex = 1">会话统计</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="tab-content__item" v-show="leftIndex === 0">
|
|
<div class="item">
|
|
<div class="title">警务群统计</div>
|
|
<div class="item-top jmhy">
|
|
<div class="item-top__item">
|
|
<h2>居民群</h2>
|
|
<div class="bottom">
|
|
<span>{{ groupNumber.groupSum || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-top__item">
|
|
<h2>群成员</h2>
|
|
<div class="bottom">
|
|
<span>{{ groupNumber.totalSum || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-top__item">
|
|
<h2>昨日新增</h2>
|
|
<div class="bottom">
|
|
<span>{{ groupNumber.increaseSum || 0 }}</span>
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
|
|
</div>
|
|
</div>
|
|
<div class="item-top__item">
|
|
<h2>昨日流失</h2>
|
|
<div class="bottom">
|
|
<span>{{ groupNumber.decreaseSum || 0 }}</span>
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart2" style="width: 100%; height: 200px;"></div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">各局统计</div>
|
|
<div class="item-top jmq">
|
|
<div class="header">
|
|
<span>居民群</span>
|
|
<span>{{ isChoose ? '派出所' : '公安局' }}</span>
|
|
<span>群成员</span>
|
|
</div>
|
|
<div class="item-top__list">
|
|
<div class="item" v-for="(item, index) in list" :key="index">
|
|
<div class="left">
|
|
<span>{{ item['居民群'] }}</span>
|
|
<div class="rate-wrapper">
|
|
<i class="rate" :style="{width: item.rate1}"></i>
|
|
</div>
|
|
</div>
|
|
<h2 :title="item.girdName">{{ item.girdName }}</h2>
|
|
<div class="right">
|
|
<div class="rate-wrapper">
|
|
<i class="rate" :style="{width: item.rate2}"></i>
|
|
</div>
|
|
<span>{{ item['群成员'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content__item" v-show="leftIndex === 1">
|
|
<div class="item">
|
|
<div class="title">消息回复率</div>
|
|
<div class="item-top DonutChart-wrapper">
|
|
<DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.replyPercentage : 0" text="昨日"></DonutChart>
|
|
<DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.weekSum : 0" text="近7天"></DonutChart>
|
|
<DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.monthSum : 0" text="近1个月"></DonutChart>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="title">单聊统计</div>
|
|
<div class="item-top dl">
|
|
<div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
|
|
<h2>单聊会话</h2>
|
|
<p>{{ userChatNumber ? userChatNumber.chatCnt : 0 }}</p>
|
|
</div>
|
|
<div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
|
|
<h2>单聊消息</h2>
|
|
<p>{{ userChatNumber ? userChatNumber.messageCnt : 0 }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 200px;"></div>
|
|
<div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 200px;"></div>
|
|
</div>
|
|
<div class="item item-tags">
|
|
<div class="title">群聊统计</div>
|
|
<div class="item-top ql">
|
|
<div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
|
|
<h2>活跃群聊</h2>
|
|
<p>{{ groupChatNumber ? groupChatNumber.chatHasMsg : 0 }}</p>
|
|
</div>
|
|
<div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
|
|
<h2>活跃群成员</h2>
|
|
<p>{{ groupChatNumber ? groupChatNumber.memberHasMsg : 0 }}</p>
|
|
</div>
|
|
<div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
|
|
<h2>群聊消息</h2>
|
|
<p>{{ groupChatNumber ? groupChatNumber.msgTotal : 0 }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 200px;"></div>
|
|
<div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 200px;"></div>
|
|
<div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 200px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle">
|
|
<div class="top">
|
|
<XyGrid :instance="instance" @nodeClick="onNodeClick"></XyGrid>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottom-title">
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
|
|
<h2>警务群动态</h2>
|
|
</div>
|
|
<div class="bottom-list">
|
|
<div class="item" v-for="item in dynamicList" :key="item.id">
|
|
<i>{{ item.createTime }}</i>
|
|
<em>{{ item.logDescription }}</em>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="appPdDv-title">警务数据</div>
|
|
<div class="right-item top-wrapper">
|
|
<div class="title">微警务群</div>
|
|
<div class="item-wrapper">
|
|
<div class="item-top__item">
|
|
<h2>{{ girdInfo['村民警员'] || 0 }}</h2>
|
|
<p>村民警员</p>
|
|
</div>
|
|
<div class="item-top__item">
|
|
<h2>{{ girdInfo['居民群'] || 0 }}</h2>
|
|
<p>居民群</p>
|
|
</div>
|
|
<div class="item-top__item">
|
|
<h2>{{ girdInfo['群成员'] || 0 }}</h2>
|
|
<p>群成员</p>
|
|
</div>
|
|
<div class="item-top__item">
|
|
<h2>{{ girdInfo['居民好友'] || 0 }}</h2>
|
|
<p>居民好友</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-item middle-wrapper">
|
|
<div class="title">分类统计</div>
|
|
<div class="item-table">
|
|
<div class="left">
|
|
<div class="chart10" style="width: 100%; height: 240px;"></div>
|
|
<div class="left-text">
|
|
<h2>{{ total || 0 }}</h2>
|
|
<span>总数</span>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right-item" v-for="(item, index) in typeList" :key="index">
|
|
<div class="right-item__left">
|
|
<i :style="{background: colorList[index]}"></i>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<p>{{ item.value }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-item bottom-wrapper">
|
|
<div class="title">警务群统计</div>
|
|
<div class="item-table">
|
|
<div class="item-table__header">
|
|
<span style="width: 110px">居民群</span>
|
|
<span style="flex: 1; text-align: center;">群主</span>
|
|
<span style="width: 60px; text-align: right;">群人数</span>
|
|
</div>
|
|
<div class="item-table__body">
|
|
<div class="item-table__item" v-for="(item, index) in gridList" :key="index">
|
|
<span style="width: 110px" :title="item.name">{{ item.name || '未命名群聊' }}</span>
|
|
<span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
|
|
<span style="width: 60px; text-align: right;">{{ item.memberCount }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import DonutChart from './components/DonutChart'
|
|
import XyGrid from './components/XyGrid'
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: 'AppXyDv',
|
|
label: '兴义大屏',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
},
|
|
|
|
components: {
|
|
DonutChart,
|
|
XyGrid
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
leftIndex: 0,
|
|
dlIndex: 0,
|
|
qlIndex: 0,
|
|
currGirdName: '',
|
|
girdInfo: {},
|
|
gridList: [],
|
|
userChatNumber: {},
|
|
residentInfo: {},
|
|
tagInfo: {},
|
|
groupNumber: {},
|
|
replyPercentage: {},
|
|
groupChatNumber: {},
|
|
dynamicList: [],
|
|
total: 0,
|
|
typeList: [],
|
|
list: [],
|
|
isChoose: false,
|
|
colorList: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#FFBA68', '#FD6C39']
|
|
}
|
|
},
|
|
|
|
created () {
|
|
this.getInfo()
|
|
this.getGridInfo({})
|
|
},
|
|
|
|
mounted () {
|
|
document.title = '兴义大屏'
|
|
this.$nextTick(() => {
|
|
if (document.querySelector('.AiDvWrapper .viewPanel')) {
|
|
document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
|
|
}
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
onNodeClick (e) {
|
|
this.getGridInfo(e)
|
|
},
|
|
initChart5 (el, data) {
|
|
var chartDom = document.querySelector(el)
|
|
var myChart = echarts.init(chartDom)
|
|
var option = {
|
|
color: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#DBE8FF', '#FD6C39'],
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
grid: {
|
|
top: '0%',
|
|
left: '0%',
|
|
right: '0%',
|
|
bottom: '0%',
|
|
height: 230,
|
|
containLabel: true
|
|
},
|
|
series: [
|
|
{
|
|
name: '分类统计',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#030D1C',
|
|
borderWidth: 3
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '20',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
|
|
option && myChart.setOption(option)
|
|
},
|
|
|
|
getInfo () {
|
|
this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
|
|
if (res.code === 0) {
|
|
this.pointList = res.data
|
|
}
|
|
})
|
|
this.instance.post(`app/appintegraluser/suffixWeekIntegralSort`).then(res => {
|
|
if (res.code === 0) {
|
|
this.rankList = res.data
|
|
}
|
|
})
|
|
// this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
|
|
// if (res.code === 0) {
|
|
// this.residentInfo = res.data['居民统计']
|
|
// this.initLineChart('.chart1', {
|
|
// x: res.data['居民好友数'].map(v => v.month),
|
|
// value: res.data['居民好友数'].map(v => v.totalNumber),
|
|
// name: '居民好友'
|
|
// })
|
|
// }
|
|
// })
|
|
this.instance.post(`/app/wxgroupstatistic/replyPercentage`).then(res => {
|
|
if (res.code === 0) {
|
|
this.replyPercentage = res.data
|
|
}
|
|
})
|
|
this.instance.post(`/app/appUserOperation/list?size=10000`).then(res => {
|
|
if (res.code === 0) {
|
|
this.dynamicList = res.data.records
|
|
}
|
|
})
|
|
this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
|
|
if (res.code === 0) {
|
|
this.groupNumber = res.data['居民群统计']
|
|
this.initLineChart('.chart2', {
|
|
x: res.data['群成员数'].map(v => v.month),
|
|
value: res.data['群成员数'].map(v => v.totalNumber),
|
|
name: '居民群'
|
|
})
|
|
}
|
|
})
|
|
this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
|
|
if (res.code === 0) {
|
|
this.tagInfo = res.data
|
|
}
|
|
})
|
|
this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
|
|
if (res.code === 0) {
|
|
this.userChatNumber = res.data['单聊总和']
|
|
this.initBarChart('.chart4', {
|
|
x: res.data['条形统计'].map(v => v.dateDay),
|
|
value: res.data['条形统计'].map(v => v.messageCnt),
|
|
name: '单聊消息'
|
|
}, [
|
|
{offset: 0, color: 'rgba(66, 255, 254, 1)'},
|
|
{offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
|
|
])
|
|
this.initBarChart('.chart3', {
|
|
x: res.data['条形统计'].map(v => v.dateDay),
|
|
value: res.data['条形统计'].map(v => v.chatCnt),
|
|
name: '单聊会话'
|
|
}, [
|
|
{offset: 0, color: 'rgba(66, 187, 255, 1)'},
|
|
{offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
|
|
])
|
|
}
|
|
})
|
|
this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
|
|
this.groupChatNumber = res.data['群聊总和']
|
|
if (res.code === 0) {
|
|
this.initBarChart('.chart5', {
|
|
x: res.data['条形统计'].map(v => v.dateDay),
|
|
value: res.data['条形统计'].map(v => v.chatHasMsg),
|
|
name: '活跃群聊'
|
|
}, [
|
|
{offset: 0, color: 'rgba(66, 255, 254, 1)'},
|
|
{offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
|
|
])
|
|
this.initBarChart('.chart6', {
|
|
x: res.data['条形统计'].map(v => v.dateDay),
|
|
value: res.data['条形统计'].map(v => v.memberHasMsg),
|
|
name: '活跃群成员'
|
|
}, [
|
|
{offset: 0, color: 'rgba(255, 190, 66, 1)'},
|
|
{offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
|
|
])
|
|
this.initBarChart('.chart7', {
|
|
x: res.data['条形统计'].map(v => v.dateDay),
|
|
value: res.data['条形统计'].map(v => v.msgTotal),
|
|
name: '群聊消息'
|
|
}, [
|
|
{offset: 0, color: 'rgba(66, 187, 255, 1)'},
|
|
{offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
|
|
])
|
|
}
|
|
})
|
|
},
|
|
|
|
getGridInfo (e) {
|
|
if (e.level === 2 && !this.isChoose) {
|
|
this.isChoose = true
|
|
}
|
|
if (e.level === 4) return
|
|
|
|
if (e.level !== 3) {
|
|
this.instance.post(`/app/qxn_appgirdinfo/branchStatistics?girdId=${e.id || ''}`).then(res => {
|
|
if (res.code === 0) {
|
|
if (res.data && res.data.length) {
|
|
const list = res.data.map(item => {
|
|
return {
|
|
...item
|
|
}
|
|
})
|
|
|
|
const v1 = Math.max(...list.map(v => v['居民群']))
|
|
const v2 = Math.max(...list.map(v => v['群成员']))
|
|
|
|
this.list = list.map(v => {
|
|
return {
|
|
...v,
|
|
rate1: (v['居民群'] / v1 * 100).toFixed(0) + '%',
|
|
rate2: (v['群成员'] / v2 * 100).toFixed(0) + '%'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
this.instance.post(`/app/qxn_appgirdinfo/policeWork?girdId=${e.id || ''}`).then(res => {
|
|
if (res.code === 0) {
|
|
this.girdInfo = res.data.countInfo
|
|
this.gridList = res.data.groupList
|
|
if (res.data.typeInfo) {
|
|
this.total = res.data.typeInfo.map(v => v.c).reduce((x, y) => x + y)
|
|
this.typeList = res.data.typeInfo.map(v => {
|
|
return {
|
|
value: v.c,
|
|
name: v.type
|
|
}
|
|
})
|
|
this.initChart5('.chart10', this.typeList)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
initLineChart (el, data) {
|
|
var chartDom = document.querySelector(el)
|
|
var myChart = echarts.init(chartDom)
|
|
var option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: data.x,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#aeacaf'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
nameGap: 23,
|
|
minInterval: 1,
|
|
splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#aeacaf'
|
|
}
|
|
},
|
|
axisPointer: {show: false}
|
|
},
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{offset: 0, color: 'rgba(47, 211, 241, 1)'},
|
|
{offset: 1, color: 'rgba(47, 211, 241, 0)'}
|
|
]
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '14%',
|
|
left: '1%',
|
|
right: '0%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
series: [
|
|
{
|
|
data: data.value,
|
|
type: 'line',
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
color: '#fff'
|
|
},
|
|
name: data.name,
|
|
areaStyle: {},
|
|
barWidth: 16,
|
|
barCategoryGap: 40,
|
|
itemStyle: {}
|
|
}
|
|
]
|
|
}
|
|
|
|
option && myChart.setOption(option)
|
|
},
|
|
|
|
initBarChart (el, data, color) {
|
|
var chartDom = document.querySelector(el)
|
|
var myChart = echarts.init(chartDom)
|
|
var option
|
|
|
|
option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: data.x,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#aeacaf'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
nameGap: 23,
|
|
minInterval: 1,
|
|
splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#aeacaf'
|
|
}
|
|
},
|
|
axisPointer: {show: false}
|
|
},
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: color
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '14%',
|
|
left: '1%',
|
|
right: '0%',
|
|
bottom: '0%',
|
|
containLabel: true
|
|
},
|
|
series: [
|
|
{
|
|
data: data.value,
|
|
name: data.name,
|
|
type: 'bar',
|
|
label: {
|
|
show: false,
|
|
position: 'top',
|
|
color: '#fff'
|
|
},
|
|
barWidth: 8,
|
|
barCategoryGap: 40,
|
|
itemStyle: {}
|
|
}
|
|
]
|
|
}
|
|
|
|
option && myChart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppPdDv {
|
|
display: flex;
|
|
height: 100%;
|
|
padding-top: 24px;
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
|
|
background-size: 100% 100%;
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 5px;
|
|
background: rgba(93, 163, 255, 0.1);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 5px;
|
|
background: rgba(173, 208, 255, 0.5);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.DonutChart-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 84px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dl {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.item-top__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 164px;
|
|
height: 52px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl3.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
margin-bottom: 4px;
|
|
color: #4488FB;
|
|
font-size: 12px;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl4.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #2AB7D1;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-style: oblique;
|
|
}
|
|
|
|
&.active {
|
|
&:nth-of-type(1) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl1.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl2.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ql {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.item-top__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 107px;
|
|
height: 52px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
margin-bottom: 4px;
|
|
color: #2AB7D1;
|
|
font-size: 12px;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql5.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #FFD458;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql6.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #4488FB;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-style: oblique;
|
|
}
|
|
|
|
&.active {
|
|
&:nth-of-type(1) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql1.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql2.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql3.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.appPdDv-title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 10px;
|
|
z-index: 1;
|
|
width: 146px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 10px;
|
|
font-family: YouSheBiaoTiHei;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
transform: translateY(-50%);
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/b-title__bg.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title {
|
|
width: 154px;
|
|
height: 42px;
|
|
margin-bottom: 8px;
|
|
padding: 4px 0 0 34px;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
& > .left {
|
|
position: relative;
|
|
width: 360px;
|
|
height: 100%;
|
|
padding: 36px 12px 12px;
|
|
box-shadow: inset 0px 0px 5px 0px #D5E6FF;
|
|
border-radius: 8px;
|
|
border: 1px solid #030D1C;
|
|
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 32px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #0E6EB5;
|
|
|
|
div {
|
|
flex: 1;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&.active {
|
|
background: #0F93B8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.jmhy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.item-top__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 107px;
|
|
height: 52px;
|
|
line-height: 1;
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm1.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
margin-bottom: 4px;
|
|
color: #2AB7D1;
|
|
font-size: 12px;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm2.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #5ADA92;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm3.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #FF5655;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
margin-right: 2px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
font-style: oblique;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.jmq {
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 25px;
|
|
background: rgba(14,110,181,0.10);
|
|
border: 1px solid #0E6EB5;
|
|
|
|
span {
|
|
color: #fff;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.item-top__list {
|
|
height: 400px;
|
|
padding: 10px 0;
|
|
overflow-y: auto;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 4px;
|
|
|
|
.left .rate-wrapper {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
|
|
.rate-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.rate {
|
|
height: 10px;
|
|
text-align: right;
|
|
background-image: linear-gradient(270deg, rgba(255,208,63,0.00) 0%, rgba(255,208,63,0.80) 100%);
|
|
}
|
|
}
|
|
|
|
.right {
|
|
.rate {
|
|
background-image: linear-gradient(270deg, rgba(0,240,251,0.80) 0%, rgba(0,240,251,0.00) 100%);
|
|
}
|
|
|
|
span {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
width: 90px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #FFFFFF;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
|
|
background: #fff;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
span {
|
|
width: 38px;
|
|
color: #aeacaf;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart1 {
|
|
margin: 10px 0 18px;
|
|
}
|
|
|
|
.item-tags {
|
|
margin-top: 20px;
|
|
|
|
.item-bottom__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 36px;
|
|
padding: 0 20px 0 39px;
|
|
background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/tag-title.png);
|
|
background-size: 100% 100%;
|
|
|
|
h2 {
|
|
color: #aeacaf;
|
|
font-size: 13px;
|
|
}
|
|
|
|
span {
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 16px;
|
|
|
|
.top {
|
|
flex: 1;
|
|
margin-bottom: 29px;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 160px;
|
|
padding: 20px 24px;
|
|
background: rgba(15,20,47,0.5000);
|
|
box-shadow: inset 0px 0px 24px 4px rgba(163,247,255,0.7000);
|
|
border-radius: 8px;
|
|
|
|
.bottom-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
h2 {
|
|
margin-left: 4px;
|
|
font-size: 16px;
|
|
font-family: MicrosoftYaHeiSemibold;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 0px 10px #1C2F92;
|
|
}
|
|
}
|
|
|
|
.bottom-list {
|
|
height: 80px;
|
|
overflow-y: auto;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
i {
|
|
margin-right: 24px;
|
|
color: #aeacaf;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
}
|
|
|
|
span {
|
|
color: #FFD458;
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
color: #2CF0F4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .right {
|
|
position: relative;
|
|
width: 360px;
|
|
height: 100%;
|
|
padding: 36px 12px 12px;
|
|
box-shadow: inset 0px 0px 5px 0px #D5E6FF;
|
|
border-radius: 8px;
|
|
border: 1px solid #030D1C;
|
|
|
|
.top-wrapper {
|
|
margin-bottom: 23px;
|
|
|
|
.item-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item-top__item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex: 1;
|
|
margin-right: 8px;
|
|
width: 78px;
|
|
height: 66px;
|
|
border-radius: 4px;
|
|
border: 1px solid #23A0AC;
|
|
|
|
h2 {
|
|
margin-bottom: 4px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
}
|
|
|
|
p {
|
|
color: #2AF0F8;
|
|
font-size: 12px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-table {
|
|
position: relative;
|
|
height: 240px;
|
|
|
|
.left {
|
|
position: relative;
|
|
left: -70px;
|
|
height: 240px;
|
|
|
|
.left-text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 11;
|
|
line-height: 1;
|
|
transform: translate(-50%, -50%);
|
|
|
|
h2 {
|
|
font-size: 36px;
|
|
color: #fff;
|
|
}
|
|
|
|
span {
|
|
margin-top: 4px;
|
|
color: #a4adbd;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
z-index: 99;
|
|
transform: translateY(-50%);
|
|
|
|
.right-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.right-item__left {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 40px;
|
|
|
|
i {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 8px;
|
|
background: #2891FF;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
P {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.middle-wrapper {
|
|
margin-bottom: 23px;
|
|
}
|
|
|
|
.bottom-wrapper {
|
|
.item-table {
|
|
.item-table__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 24px;
|
|
color: #82C5FF;
|
|
font-size: 14px;
|
|
background: rgba(35,160,172,0.2000);
|
|
}
|
|
|
|
.item-table__body {
|
|
height: 310px;
|
|
overflow-y: overlay;
|
|
|
|
.item-table__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 24px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
background: rgba(35,160,172,0.2000);
|
|
|
|
&:nth-of-type(2n - 1) {
|
|
background: transparent;
|
|
}
|
|
|
|
span {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|