1901 lines
48 KiB
Vue
1901 lines
48 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="header-container">
|
||
<div class="header-left">
|
||
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
|
||
<div class="back-button"> {{ selectedPark }} </div>
|
||
</div>
|
||
<h1 class="header-title">总部安全管理大屏</h1>
|
||
<div class="header-right">
|
||
{{ currentTime }}
|
||
</div>
|
||
</div>
|
||
<!-- <span class="weather-warning">
|
||
天气预警:
|
||
<span style="color: red">
|
||
2025年08月19日13:25分中央气象台发布雄安地区于17时至夜间将有200毫米强降雨，并伴有10级大风......
|
||
</span>
|
||
</span> -->
|
||
<!-- 主内容区 -->
|
||
<div class="content-container">
|
||
<div class="left-wrapper">
|
||
<div class="left-top">
|
||
<div class="panel-title">总体概览</div>
|
||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||
<div class="top-card">
|
||
<div class="top-card-left">
|
||
<div>
|
||
<img width="33px" src="@/assets/images/1_224520_821.png" />
|
||
</div>
|
||
<span>总计</span>
|
||
<div class="number-wrapper">
|
||
<span class="total-number" v-for="item in 6" :key="item">{{ item }}</span>
|
||
</div>
|
||
<span>人</span>
|
||
</div>
|
||
<div class="top-card-right">
|
||
<div class="top-card-right-item">
|
||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||
<span>正式员工</span>
|
||
<div class="type-number-wrapper" style="margin-left: 2vw">
|
||
<span class="type-number" v-for="item in 3" :key="item">{{ item }}</span>
|
||
</div>
|
||
<span>人</span>
|
||
</div>
|
||
<div class="top-card-right-item">
|
||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||
<span>外协人员</span>
|
||
<div class="type-number-wrapper" style="margin-left: 1vw">
|
||
<span class="type-number" v-for="item in 2" :key="item">{{ item }}</span>
|
||
</div>
|
||
<span>人</span>
|
||
</div>
|
||
<div class="top-card-right-item">
|
||
<img width="18px" src="@/assets/images/24508_654.png" />
|
||
<span>访客</span>
|
||
<div class="type-number-wrapper">
|
||
<span class="type-number" v-for="item in 4" :key="item">{{ item }}</span>
|
||
</div>
|
||
<span>人</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-card">
|
||
<div class="bottom-card-title">
|
||
<span>各园区统计</span>
|
||
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
|
||
</div>
|
||
<div ref="barChart" class="bar-chart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="left-bottom">
|
||
<div class="panel-title">
|
||
<div class="tabs">
|
||
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="activeTab = '高危作业'">高危作业</span>
|
||
<span class="divider">|</span>
|
||
<span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="activeTab = '安全培训考试'">安全培训考试</span>
|
||
<span class="divider">|</span>
|
||
<span
|
||
class="tab" :class="{ active: activeTab === '安全培训考试' }"
|
||
@click="activeTab = '安全培训考试'">安全培训考试</span>
|
||
</div>
|
||
</div>
|
||
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
|
||
<div class="bottom-card">
|
||
<div class="bottom-card-title">
|
||
<span>各园区统计</span>
|
||
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
|
||
</div>
|
||
</div>
|
||
<div ref="donutChart" class="donut-chart-with-labels"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right-wrapper">
|
||
<div class="right-top" style="text-align: right">
|
||
<div class="panel-title">高风险告警</div>
|
||
<div>
|
||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||
</div>
|
||
<div class="tip-container">
|
||
<div class="tip-image">
|
||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||
<span class="number">1234</span>
|
||
</div>
|
||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||
<div class="tip-content">
|
||
<div class="col-item">
|
||
<img src="@/assets/images/screen/warning_img.png" width="23" />
|
||
<span>告警总数</span>
|
||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">456</span>
|
||
</div>
|
||
<div class="col-item">
|
||
<span>已处理</span>
|
||
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">456</span>
|
||
</div>
|
||
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
|
||
<span>待处理</span>
|
||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">456</span>
|
||
</div>
|
||
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
|
||
<span>处理中</span>
|
||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">456</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-content">
|
||
<div class="list-title">
|
||
<span>告警详情</span>
|
||
<img width="50%" src="@/assets/images/line_1.png" />
|
||
</div>
|
||
<div class="list">
|
||
<div class="list-wrapper">
|
||
<div class="list-item" v-for="(item, index) in sourceAcitve" :key="index + item.text">
|
||
<span class="alert-text" :class="[{ error: item.error }, { warn: item.warn }]">{{ (index + 1) *
|
||
sourceIndex }} {{ item.text }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-bottom" style="text-align: right">
|
||
<div class="panel-title">超时工单</div>
|
||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||
|
||
<div class="tip-container">
|
||
<div class="tip-image">
|
||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||
<span class="number">1234</span>
|
||
</div>
|
||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||
<div class="tip-content">
|
||
<div class="col-item">
|
||
<img src="@/assets/images/screen/warning_img.png" width="23" />
|
||
<span>超时工单数</span>
|
||
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">10</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-content">
|
||
<div class="list-title">
|
||
<span>工单详情</span>
|
||
<img width="50%" src="@/assets/images/line_1.png" />
|
||
</div>
|
||
<div class="list">
|
||
<div class="list-wrapper">
|
||
<div class="list-item" v-for="(item, index) in sourceAcitve" :key="index + item.text">
|
||
<span class="alert-text" :class="[{ error: item.error }, { warn: item.warn }]">{{ (index + 1) *
|
||
sourceIndex }} {{ item.text }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-container">
|
||
<div class="center-content">
|
||
<span class="title">隐患排查治理</span>
|
||
<img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
|
||
<span class="sub-title">分类风险</span>
|
||
<img width="50%" src="@/assets/images/line_1.png" />
|
||
<div class="type-wrapper">
|
||
<div class="type-item">
|
||
<span class="type-btn">重大</span>
|
||
<span class="type-num">1234</span>
|
||
</div>
|
||
<div class="type-item">
|
||
<span class="type-btn active">一般</span>
|
||
<span class="type-num">1234</span>
|
||
</div>
|
||
</div>
|
||
<div class="clasic-wrapper">
|
||
<div class="clasic-item">
|
||
<span>处理进度</span>
|
||
<img width="100%" src="@/assets/images/line_1.png" />
|
||
</div>
|
||
<div class="clasic-item">
|
||
<span>Top3隐患类</span>
|
||
<img width="100%" src="@/assets/images/line_1.png" />
|
||
</div>
|
||
</div>
|
||
<div class="echart-wrapper">
|
||
<div class="lf-rt">
|
||
<div ref="progressChart" class="progress-chart"></div>
|
||
<div class="progress-legend">
|
||
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
||
<div class="legend-item"><span class="dot green"></span>已处理</div>
|
||
</div>
|
||
<div class="progress-legend">
|
||
<div class="legend-item"><span class="dot yellow"></span>待排查</div>
|
||
<div class="legend-item"><span class="dot blue"></span>处理中</div>
|
||
</div>
|
||
</div>
|
||
<div class="lf-rt">
|
||
<div ref="classicChart" class="progress-chart"></div>
|
||
<div class="progress-legend">
|
||
<div class="legend-item"><span class="dot red"></span>门禁</div>
|
||
<div class="legend-item"><span class="dot green"></span>消费</div>
|
||
<div class="legend-item"><span class="dot yellow"></span>巡检</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="safe-wrapper">
|
||
<span class="safe-title">
|
||
<img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
|
||
安全指数:
|
||
</span>
|
||
<span class="pending-count">86</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 区域选择弹窗 -->
|
||
<RegionSelector v-model="regionSelectorVisible" v-model:modelSelected="selectedRegion" @change="onRegionChange" />
|
||
</template>
|
||
|
||
<script>
|
||
import { rgbToHex } from '@/utils/color'
|
||
import * as echarts from 'echarts'
|
||
import RegionSelector from './RegionSelector.vue'
|
||
export default {
|
||
name: 'MainScreen',
|
||
components: {
|
||
RegionSelector,
|
||
},
|
||
data () {
|
||
return {
|
||
currentTime: '',
|
||
regionSelectorVisible: false,
|
||
parkSelectorVisible: false,
|
||
selectedRegion: '',
|
||
selectedPark: '',
|
||
activeTab: '高危作业',
|
||
barChart: null,
|
||
donutChart: null,
|
||
bottomBarChart: null,
|
||
bottomPieChart: null,
|
||
|
||
source: [
|
||
// {
|
||
// text: '2024-07-10 上午8:00 雄安园区隐患内容管理 状态 处理',
|
||
// error: true
|
||
// },
|
||
// {
|
||
// text: '2025-07-09 上海XXX区域A1门禁告警 处理中 紧急',
|
||
// error: true
|
||
// },
|
||
// {
|
||
// text: '2025-07-09 上海XXX区域A1门禁告警 处理中 紧急',
|
||
// error: true
|
||
// },
|
||
// {
|
||
// text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果',
|
||
// warn: true
|
||
// },
|
||
// {
|
||
// text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果',
|
||
// warn: true
|
||
// },
|
||
// {
|
||
// text: '2020-06-18 编辑内容编辑内容编辑内容编辑内容编辑内容 状态 结果'
|
||
// }
|
||
],
|
||
sourceIndex: 1,
|
||
source1: [
|
||
// {
|
||
// text: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理'
|
||
// },
|
||
// {
|
||
// text: '2025-08-09 背景XXX区域A1门禁告警 处理中 紧急',
|
||
// error: true
|
||
// },
|
||
// {
|
||
// text: '2025-08-09 武汉金融港区域A1门禁告警 处理中 紧急',
|
||
// error: true
|
||
// },
|
||
// {
|
||
// text: '2020-08-18 这是编辑的内容容编辑内容 状态 结果'
|
||
// },
|
||
// {
|
||
// text: '2020-07-18 武汉光谷软件园容编辑内容 状态 结果'
|
||
// },
|
||
// {
|
||
// text: '2020-08-18 成都天府软件园A区编辑内容编辑内容 状态 结果',
|
||
// warn: true
|
||
// }
|
||
],
|
||
sourceAcitve: [],
|
||
|
||
progressChart: null,
|
||
classicChart: null,
|
||
|
||
}
|
||
},
|
||
watch: {
|
||
sourceIndex () {
|
||
console.log('sourceIndex', this.sourceIndex)
|
||
if (this.sourceIndex === 2) {
|
||
this.sourceAcitve = this.source1
|
||
} else {
|
||
this.sourceAcitve = this.source
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
this.selectedPark = this.$route.query.park
|
||
this.sourceAcitve = this.source
|
||
},
|
||
mounted () {
|
||
this.updateTime()
|
||
|
||
this.initCharts()
|
||
this.initBottomCharts() // 初始化底部图表
|
||
setInterval(this.updateTime, 1000)
|
||
this.sourceAcitve = this.source
|
||
this.timeOut1()
|
||
|
||
nextTick(() => {
|
||
this.initProgressChart()
|
||
this.initClassicChart()
|
||
})
|
||
},
|
||
methods: {
|
||
// 区域选择变更
|
||
onRegionChange (name) {
|
||
this.selectedRegion = name
|
||
this.$router.push({
|
||
path: '/screen/region',
|
||
query: { region: name }
|
||
})
|
||
},
|
||
// 返回上一级：总部
|
||
returnToHeadquarters () {
|
||
this.$router.back()
|
||
},
|
||
// 处理进度
|
||
initProgressChart () {
|
||
this.progressChart = echarts.init(this.$refs.progressChart)
|
||
const width = this.progressChart.getWidth()
|
||
const progressOption = {
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: '60%',
|
||
center: ['50%', '50%'],
|
||
left: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
data: [
|
||
{ value: 20, name: 'Search Engine' },
|
||
{ value: 15, name: 'Direct' },
|
||
{ value: 30, name: 'Email' },
|
||
{ value: 25, name: 'Union Ads' },
|
||
],
|
||
// itemStyle: {
|
||
// borderColor: '#fff',
|
||
// borderWidth: 1
|
||
// },
|
||
label: {
|
||
alignTo: 'edge',
|
||
// formatter: '{time|{c} %}\n{name|{b}}',
|
||
formatter: '{time|{c} %}\n',
|
||
minMargin: 5,
|
||
edgeDistance: 10,
|
||
lineHeight: 15,
|
||
rich: {
|
||
time: {
|
||
fontSize: 10,
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
length: 5,
|
||
length2: 0,
|
||
maxSurfaceAngle: 10
|
||
},
|
||
labelLayout: function (params) {
|
||
const isLeft = params.labelRect.x < width / 2;
|
||
const points = params.labelLinePoints;
|
||
points[2][0] = isLeft
|
||
? params.labelRect.x
|
||
: params.labelRect.x + params.labelRect.width;
|
||
return {
|
||
labelLinePoints: points
|
||
};
|
||
},
|
||
}
|
||
]
|
||
}
|
||
this.progressChart.setOption(progressOption)
|
||
},
|
||
|
||
// Top3隐患类
|
||
initClassicChart () {
|
||
this.classicChart = echarts.init(this.$refs.classicChart)
|
||
const width = this.classicChart.getWidth()
|
||
const progressOption = {
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
roseType: 'radius',
|
||
radius: [30, 50],
|
||
center: ['50%', '50%'],
|
||
left: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
data: [
|
||
{ value: 123, name: '门禁' },
|
||
{ value: 45, name: '消防' },
|
||
{ value: 68, name: '巡检' },
|
||
],
|
||
label: {
|
||
alignTo: 'edge',
|
||
// formatter: '{time|{c} %}\n{name|{b}}',
|
||
formatter: '{time|{c}}\n',
|
||
minMargin: 5,
|
||
edgeDistance: 10,
|
||
lineHeight: 15,
|
||
rich: {
|
||
time: {
|
||
fontSize: 10,
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
length: 5,
|
||
length2: 0,
|
||
maxSurfaceAngle: 10
|
||
},
|
||
labelLayout: function (params) {
|
||
const isLeft = params.labelRect.x < width / 2;
|
||
const points = params.labelLinePoints;
|
||
points[2][0] = isLeft
|
||
? params.labelRect.x
|
||
: params.labelRect.x + params.labelRect.width;
|
||
return {
|
||
labelLinePoints: points
|
||
};
|
||
},
|
||
}
|
||
]
|
||
}
|
||
this.classicChart.setOption(progressOption)
|
||
},
|
||
|
||
timeOut1 () {
|
||
setInterval(() => {
|
||
if (this.sourceIndex === 2) {
|
||
this.sourceIndex--
|
||
} else {
|
||
this.sourceIndex++
|
||
}
|
||
}, 3000)
|
||
},
|
||
updateTime () {
|
||
const now = new Date()
|
||
const year = now.getFullYear()
|
||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||
const day = String(now.getDate()).padStart(2, '0')
|
||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
const weekday = weekdays[now.getDay()]
|
||
const hours = String(now.getHours()).padStart(2, '0')
|
||
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||
|
||
// this.currentDate = `${year}年${month}月${day}日`
|
||
// this.currentWeek = weekday
|
||
// this.currentTime = `${hours}:${minutes}:${seconds}`
|
||
this.currentTime = `${year}年${month}月${day}日 ${weekday} ${hours}:${minutes}:${seconds}`
|
||
},
|
||
|
||
initCharts () {
|
||
this.initBarChart()
|
||
this.initDonutChart()
|
||
this.initProgressCharts()
|
||
},
|
||
|
||
initBarChart () {
|
||
if (this.$refs.barChart) {
|
||
this.barChart = echarts.init(this.$refs.barChart)
|
||
|
||
const option = {
|
||
legend: {
|
||
top: '10%',
|
||
right: '15%',
|
||
orient: 'vertical',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: '11px'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '30%',
|
||
top: '10%',
|
||
bottom: '15%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['雄安', '北京丰台', '北京恒毅', '上海', '重庆', '成都'],
|
||
axisLabel: {
|
||
color: '#ffffff',
|
||
fontSize: 10
|
||
},
|
||
axisLine: {
|
||
lineStyle: { color: '#334155' }
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#ffffff',
|
||
fontSize: 10
|
||
},
|
||
axisLine: {
|
||
lineStyle: { color: '#334155' }
|
||
},
|
||
splitLine: {
|
||
lineStyle: { color: '#334155' }
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '正式员工',
|
||
type: 'bar',
|
||
data: [320, 302, 301, 334, 390, 330],
|
||
itemStyle: { color: rgbToHex(99, 196, 251) },
|
||
barWidth: '15%'
|
||
},
|
||
{
|
||
name: '外协人员',
|
||
type: 'bar',
|
||
data: [120, 132, 101, 134, 90, 230],
|
||
itemStyle: { color: rgbToHex(251, 246, 85) },
|
||
barWidth: '15%'
|
||
},
|
||
{
|
||
name: '访客',
|
||
type: 'bar',
|
||
data: [220, 182, 191, 234, 290, 330],
|
||
itemStyle: { color: rgbToHex(200, 69, 237) },
|
||
barWidth: '15%'
|
||
}
|
||
]
|
||
}
|
||
|
||
this.barChart.setOption(option)
|
||
}
|
||
},
|
||
|
||
initDonutChart () {
|
||
if (this.$refs.donutChart) {
|
||
this.donutChart = echarts.init(this.$refs.donutChart)
|
||
|
||
const option = {
|
||
legend: {
|
||
bottom: '10%',
|
||
right: '0%',
|
||
orient: 'vertical',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: '11px'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['25%', '55%'],
|
||
center: ['50%', '50%'],
|
||
title: '阿斯顿发生',
|
||
data: [
|
||
{ value: 12, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||
{ value: 234, name: '已处理', itemStyle: { color: '#10b981' } },
|
||
{ value: 34, name: '待排查', itemStyle: { color: '#eab308' } },
|
||
{ value: 134, name: '处理中', itemStyle: { color: '#3b82f6' } },
|
||
{ value: 124, name: '分类五', itemStyle: { color: '#f59e0b' } }
|
||
],
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
formatter: function (params) {
|
||
return params.value + ' ' + params.percent + '%'
|
||
},
|
||
fontSize: 12,
|
||
color: '#ffffff',
|
||
fontWeight: 'bold'
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 15,
|
||
length2: 10,
|
||
lineStyle: {
|
||
color: '#64748b',
|
||
width: 1
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
this.donutChart.setOption(option)
|
||
}
|
||
},
|
||
|
||
initProgressCharts () {
|
||
const progressOptions = [
|
||
{ value: 25, color: '#ef4444' },
|
||
{ value: 20, color: '#10b981' },
|
||
{ value: 15, color: '#eab308' }
|
||
]
|
||
|
||
const refs = []
|
||
const charts = []
|
||
|
||
refs.forEach((ref, index) => {
|
||
if (this.$refs[ref]) {
|
||
this[charts[index]] = echarts.init(this.$refs[ref])
|
||
|
||
const option = {
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['60%', '80%'],
|
||
center: ['50%', '50%'],
|
||
startAngle: 90,
|
||
data: [
|
||
{
|
||
value: progressOptions[index].value,
|
||
itemStyle: { color: progressOptions[index].color }
|
||
},
|
||
{
|
||
value: 100 - progressOptions[index].value,
|
||
itemStyle: { color: 'rgba(51, 65, 85, 0.3)' }
|
||
}
|
||
],
|
||
label: { show: false },
|
||
labelLine: { show: false },
|
||
silent: true
|
||
}
|
||
]
|
||
}
|
||
|
||
this[charts[index]].setOption(option)
|
||
}
|
||
})
|
||
},
|
||
|
||
initBottomCharts () {
|
||
this.initBottomBarChart()
|
||
this.initBottomPieChart()
|
||
},
|
||
|
||
initBottomBarChart () {
|
||
if (this.$refs.bottomBarChart) {
|
||
this.bottomBarChart = echarts.init(this.$refs.bottomBarChart)
|
||
|
||
const option = {
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
top: '15%',
|
||
bottom: '15%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['雄安', '北京丰台', '北京恒毅', '上海', '重庆', '成都'],
|
||
axisLabel: {
|
||
color: '#94a3b8',
|
||
fontSize: 10
|
||
},
|
||
axisLine: {
|
||
lineStyle: { color: '#334155' }
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#94a3b8',
|
||
fontSize: 10
|
||
},
|
||
axisLine: {
|
||
lineStyle: { color: '#334155' }
|
||
},
|
||
splitLine: {
|
||
lineStyle: { color: '#334155' }
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '数据1',
|
||
type: 'bar',
|
||
data: [230, 200, 210, 220, 190, 240],
|
||
itemStyle: { color: '#3b82f6' },
|
||
barWidth: '20%'
|
||
},
|
||
{
|
||
name: '数据2',
|
||
type: 'bar',
|
||
data: [200, 180, 190, 210, 170, 220],
|
||
itemStyle: { color: '#eab308' },
|
||
barWidth: '20%'
|
||
},
|
||
{
|
||
name: '数据3',
|
||
type: 'bar',
|
||
data: [220, 210, 200, 230, 180, 250],
|
||
itemStyle: { color: '#8b5cf6' },
|
||
barWidth: '20%'
|
||
}
|
||
]
|
||
}
|
||
|
||
this.bottomBarChart.setOption(option)
|
||
}
|
||
},
|
||
|
||
initBottomPieChart () {
|
||
if (this.$refs.bottomPieChart) {
|
||
this.bottomPieChart = echarts.init(this.$refs.bottomPieChart)
|
||
|
||
const option = {
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '50%'],
|
||
data: [
|
||
{ value: 1234, name: '分类一', itemStyle: { color: '#3b82f6' } },
|
||
{ value: 1234, name: '分类二', itemStyle: { color: '#eab308' } },
|
||
{ value: 1234, name: '分类三', itemStyle: { color: '#8b5cf6' } },
|
||
{ value: 1234, name: '分类四', itemStyle: { color: '#10b981' } },
|
||
{ value: 1234, name: '分类五', itemStyle: { color: '#f59e0b' } }
|
||
],
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
formatter: function (params) {
|
||
return params.name + ' ' + params.percent + '%'
|
||
},
|
||
fontSize: 10,
|
||
color: '#ffffff',
|
||
fontWeight: 'bold'
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 10,
|
||
length2: 5,
|
||
lineStyle: {
|
||
color: '#64748b',
|
||
width: 1
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
this.bottomPieChart.setOption(option)
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 响应式设计 - 自动适应不同屏幕尺寸 */
|
||
@media (width <=1200px) {
|
||
.dashboard-container {
|
||
.content-container {
|
||
column-gap: 4vw;
|
||
|
||
.center-container {
|
||
width: 60vh;
|
||
height: 60vh;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (width <=1024px) {
|
||
.dashboard-container {
|
||
.header-container {
|
||
.header-title {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.header-left .back-button {
|
||
min-width: 8vw;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.header-right {
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
|
||
.content-container {
|
||
column-gap: 3vw;
|
||
padding: 0 8px 15px;
|
||
|
||
.left-wrapper {
|
||
.left-top .top-card {
|
||
.top-card-left {
|
||
min-width: 18vw;
|
||
}
|
||
|
||
.top-card-right {
|
||
min-width: 25vw;
|
||
}
|
||
}
|
||
|
||
.left-bottom .donut-chart-with-labels {
|
||
width: 35vw;
|
||
height: 35vh;
|
||
}
|
||
}
|
||
|
||
.center-container {
|
||
width: 55vh;
|
||
height: 55vh;
|
||
|
||
.center-content {
|
||
.title {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.type-wrapper {
|
||
width: 85%;
|
||
|
||
.type-item .type-btn {
|
||
padding: 2px 25px;
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (width <=768px) {
|
||
.dashboard-container {
|
||
font-size: 0.7rem;
|
||
|
||
.header-container {
|
||
height: 70px;
|
||
|
||
.header-left {
|
||
line-height: 70px;
|
||
|
||
.back-button {
|
||
min-width: 12vw;
|
||
padding: 3px 12px;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 1rem;
|
||
line-height: 35px;
|
||
}
|
||
|
||
.header-right {
|
||
margin-right: 15px;
|
||
font-size: 0.7rem;
|
||
line-height: 70px;
|
||
}
|
||
}
|
||
|
||
.weather-warning {
|
||
margin-left: 5%;
|
||
font-size: 0.7rem;
|
||
line-height: 35px;
|
||
}
|
||
|
||
.content-container {
|
||
column-gap: 2vw;
|
||
padding: 0 5px 10px;
|
||
|
||
.panel-title {
|
||
margin: 3px 15px 0;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.left-wrapper {
|
||
.left-top .top-card {
|
||
padding: 0 15px;
|
||
column-gap: 10px;
|
||
|
||
.top-card-left {
|
||
height: 10vh;
|
||
min-width: 20vw;
|
||
|
||
.total-number {
|
||
width: 22px;
|
||
height: 40px;
|
||
font-size: 0.7rem;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
.top-card-right {
|
||
height: 10vh;
|
||
min-width: 30vw;
|
||
|
||
.top-card-right-item {
|
||
font-size: 0.65rem;
|
||
|
||
.type-number-wrapper .type-number {
|
||
width: 12px;
|
||
height: 20px;
|
||
font-size: 0.8rem;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-bottom {
|
||
.tabs .tab {
|
||
padding: 1px 8px;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.donut-chart-with-labels {
|
||
width: 40vw;
|
||
height: 40vh;
|
||
margin-left: 1vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrapper {
|
||
|
||
.right-top,
|
||
.right-bottom {
|
||
.tip-container {
|
||
width: 80%;
|
||
height: 70px;
|
||
|
||
.tip-image img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.tip-content .col-item {
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
width: 75%;
|
||
|
||
.list .list-item {
|
||
padding: 0.4vh 0.3vw;
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-container {
|
||
top: 60%;
|
||
width: 50vh;
|
||
height: 50vh;
|
||
|
||
.center-content {
|
||
.title {
|
||
margin-top: 1.5vh;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.type-wrapper {
|
||
width: 90%;
|
||
margin-top: 0.3vh;
|
||
|
||
.type-item {
|
||
.type-btn {
|
||
padding: 2px 20px;
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.type-num {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.clasic-wrapper {
|
||
width: 90%;
|
||
margin-top: 1vh;
|
||
|
||
.clasic-item {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
.echart-wrapper {
|
||
width: 90%;
|
||
|
||
.lf-rt .progress-legend .legend-item {
|
||
font-size: 0.6rem;
|
||
}
|
||
}
|
||
|
||
.safe-wrapper {
|
||
width: 50%;
|
||
|
||
.safe-title {
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.pending-count {
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (width <=480px) {
|
||
.dashboard-container {
|
||
.header-container {
|
||
height: 60px;
|
||
|
||
.header-left {
|
||
line-height: 60px;
|
||
|
||
.back-button {
|
||
min-width: 15vw;
|
||
padding: 2px 10px;
|
||
font-size: 0.65rem;
|
||
}
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 0.9rem;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.header-right {
|
||
margin-right: 10px;
|
||
font-size: 0.65rem;
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
|
||
.weather-warning {
|
||
margin-left: 3%;
|
||
font-size: 0.65rem;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.content-container {
|
||
column-gap: 1vw;
|
||
padding: 0 3px 8px;
|
||
|
||
.left-wrapper {
|
||
.left-top .top-card {
|
||
padding: 0 10px;
|
||
column-gap: 8px;
|
||
|
||
.top-card-left {
|
||
height: 8vh;
|
||
min-width: 25vw;
|
||
|
||
.total-number {
|
||
width: 18px;
|
||
height: 35px;
|
||
font-size: 0.65rem;
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
|
||
.top-card-right {
|
||
height: 8vh;
|
||
min-width: 35vw;
|
||
|
||
.top-card-right-item {
|
||
font-size: 0.6rem;
|
||
|
||
.type-number-wrapper .type-number {
|
||
width: 10px;
|
||
height: 18px;
|
||
font-size: 0.7rem;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.left-bottom .donut-chart-with-labels {
|
||
width: 45vw;
|
||
height: 45vh;
|
||
margin-left: 0.5vw;
|
||
}
|
||
}
|
||
|
||
.center-container {
|
||
top: 65%;
|
||
width: 45vh;
|
||
height: 45vh;
|
||
|
||
.center-content {
|
||
.title {
|
||
margin-top: 1vh;
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 0.6rem;
|
||
}
|
||
|
||
.type-wrapper {
|
||
width: 95%;
|
||
|
||
.type-item .type-btn {
|
||
padding: 1px 15px;
|
||
font-size: 0.55rem;
|
||
}
|
||
}
|
||
|
||
.echart-wrapper {
|
||
width: 95%;
|
||
}
|
||
|
||
.safe-wrapper {
|
||
width: 60%;
|
||
|
||
.safe-title {
|
||
font-size: 0.65rem;
|
||
}
|
||
|
||
.pending-count {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dashboard-container {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
font-size: 0.8rem;
|
||
color: #fff;
|
||
background: url('@/assets/images/v2_rel0n6.png');
|
||
background-color: #030e22;
|
||
background-size: cover;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.dot.red {
|
||
background-color: #ef4444;
|
||
}
|
||
|
||
.dot.green {
|
||
background-color: #10b981;
|
||
}
|
||
|
||
.dot.yellow {
|
||
background-color: #eab308;
|
||
}
|
||
|
||
.dot.blue {
|
||
background-color: #3b82f6;
|
||
}
|
||
|
||
.dot.cyan {
|
||
background-color: #06b6d4;
|
||
}
|
||
|
||
.dot.purple {
|
||
background-color: #8b5cf6;
|
||
}
|
||
|
||
.dot.orange {
|
||
background-color: #f59e0b;
|
||
}
|
||
|
||
.header-container {
|
||
display: flex;
|
||
height: 80px;
|
||
background: url('@/assets/images/top_bg.png') no-repeat;
|
||
background-size: 100%;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
padding-left: 1vw;
|
||
line-height: 80px;
|
||
flex: 1;
|
||
align-items: center;
|
||
|
||
.back-img {
|
||
height: 3vh;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.back-button {
|
||
display: inline-flex;
|
||
height: 2vh;
|
||
min-width: 6vw;
|
||
padding: 4px 16px;
|
||
margin-left: 0.5vw;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
background: rgb(13 24 84 / 80%);
|
||
border: 1px solid rgb(59 130 246 / 40%);
|
||
transition: all 0.3s ease;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.back-button:hover {
|
||
background: rgb(59 130 246 / 30%);
|
||
border-color: rgb(59 130 246 / 60%);
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
margin-right: 20px;
|
||
font-size: 0.9rem;
|
||
line-height: 80px;
|
||
text-align: right;
|
||
flex: 1;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
line-height: 40px;
|
||
color: #fff;
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.weather-warning {
|
||
margin-left: 10%;
|
||
line-height: 45px;
|
||
}
|
||
|
||
.content-container {
|
||
position: relative;
|
||
display: flex;
|
||
width: calc(100vw - 20px);
|
||
height: calc(100vh - 105px);
|
||
padding: 0 10px 20px;
|
||
column-gap: 7vw;
|
||
|
||
.panel-title {
|
||
margin: 4px 20px 0;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.bottom-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.bottom-card-title {
|
||
display: flex;
|
||
margin-top: 5px;
|
||
margin-left: -15%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.bar-chart {
|
||
flex: 1;
|
||
width: 80%;
|
||
min-height: 17.5vh;
|
||
}
|
||
}
|
||
|
||
.left-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
row-gap: 1rem;
|
||
height: 100%;
|
||
|
||
.left-top {
|
||
padding: 0 5px;
|
||
background-image:
|
||
url('@/assets/images/screen/left_top_img.png'),
|
||
url('@/assets/images/screen/left_center_img.png'),
|
||
url('@/assets/images/screen/left_bottom_img.png');
|
||
background-position:
|
||
top center,
|
||
left center,
|
||
bottom center;
|
||
|
||
/* 设置大小，注意中间的背景图应该覆盖整个容器 */
|
||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||
|
||
/* 设置位置 */
|
||
background-size:
|
||
100% 90px,
|
||
cover,
|
||
100% 68px;
|
||
flex: 1;
|
||
|
||
/* 设置重复方式 */
|
||
.top-card {
|
||
display: flex;
|
||
padding: 0 20px;
|
||
column-gap: 15px;
|
||
font-size: 0.8rem;
|
||
|
||
.top-card-left {
|
||
display: flex;
|
||
height: 12vh;
|
||
min-width: 15vw;
|
||
padding: 0 10px;
|
||
background-image: url('@/assets/imgs/total_count_card_bg.png');
|
||
background-size: cover;
|
||
column-gap: 6px;
|
||
align-items: center;
|
||
|
||
.number-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: 0.8rem;
|
||
color: #fff;
|
||
}
|
||
|
||
.total-number {
|
||
display: inline-block;
|
||
width: 26px;
|
||
height: 50px;
|
||
font-size: 0.8rem;
|
||
line-height: 50px;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-color: rgb(177 74 201 / 100%);
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.top-card-right {
|
||
display: flex;
|
||
height: 12vh;
|
||
min-width: 20vw;
|
||
background-image: url('@/assets/imgs/staff_types_bg.png');
|
||
background-position: top center;
|
||
background-size: cover;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
row-gap: 4px;
|
||
|
||
.top-card-right-item {
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 5px;
|
||
padding: 0 10px;
|
||
font-size: 0.7rem;
|
||
color: #fff;
|
||
|
||
.type-number-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
font-size: 0.8rem;
|
||
color: #fff;
|
||
|
||
.type-number {
|
||
display: inline-block;
|
||
width: 14px;
|
||
height: 25px;
|
||
font-size: 0.9rem;
|
||
line-height: 25px;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-color: #1afb8f;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.left-bottom {
|
||
background-image:
|
||
url('@/assets/images/screen/left_top_2_img.png'),
|
||
url('@/assets/images/screen/left_center_img.png'),
|
||
url('@/assets/images/screen/left_bottom_img.png');
|
||
background-position:
|
||
top center,
|
||
left center,
|
||
bottom center;
|
||
|
||
/* 设置大小，注意中间的背景图应该覆盖整个容器 */
|
||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||
|
||
/* 设置位置 */
|
||
background-size:
|
||
100% 90px,
|
||
cover,
|
||
100% 68px;
|
||
flex: 1;
|
||
|
||
/* 设置重复方式 */
|
||
.tabs {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
column-gap: 8px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 2px 10px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease-in-out;
|
||
user-select: none;
|
||
}
|
||
|
||
.tab:hover {
|
||
color: #1afb8f;
|
||
}
|
||
|
||
.tab.active {
|
||
color: #1afb8f;
|
||
background: rgb(26 251 143 / 12%);
|
||
border: 1px solid rgb(26 251 143 / 35%);
|
||
}
|
||
|
||
.divider {
|
||
margin: 0 2px;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.donut-chart-with-labels {
|
||
width: 30vw;
|
||
height: 30vh;
|
||
margin-left: 2vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrapper {
|
||
display: flex;
|
||
height: 100%;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
row-gap: 1rem;
|
||
|
||
.right-top {
|
||
/* 设置重复方式 */
|
||
display: flex;
|
||
background-image:
|
||
url('@/assets/images/screen/right_top_img.png'),
|
||
url('@/assets/images/screen/right_center_img.png'),
|
||
url('@/assets/images/screen/right_bottom_img.png');
|
||
background-position:
|
||
top center,
|
||
right center,
|
||
bottom center;
|
||
|
||
/* 设置大小，注意中间的背景图应该覆盖整个容器 */
|
||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||
|
||
/* 设置位置 */
|
||
background-size:
|
||
100% 90px,
|
||
cover,
|
||
100% 68px;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
|
||
.tip-container {
|
||
position: relative;
|
||
display: flex;
|
||
width: 70%;
|
||
height: 80px;
|
||
padding-right: 20px;
|
||
align-items: center;
|
||
justify-content: end;
|
||
|
||
.tip-image {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%) translateX(-50%);
|
||
|
||
.number {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
font-size: 1rem;
|
||
color: #fff;
|
||
transform: translate(-80%, -50%);
|
||
}
|
||
}
|
||
|
||
.tip-content {
|
||
position: absolute;
|
||
inset: 0% 0 0 6%;
|
||
display: flex;
|
||
padding-left: 20px;
|
||
align-items: center;
|
||
|
||
.col-item {
|
||
display: flex;
|
||
margin-left: 1vw;
|
||
align-items: center;
|
||
|
||
span {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
display: flex;
|
||
width: 68%;
|
||
height: calc(100% - 100px);
|
||
margin-top: 20px;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
|
||
.list-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
width: 100%;
|
||
max-height: 22vh;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.list-wrapper {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-top: 10px;
|
||
overflow: hidden scroll;
|
||
flex-direction: column;
|
||
row-gap: 4px;
|
||
}
|
||
|
||
.list-item {
|
||
display: inline-flex;
|
||
padding: 0.5vh 0.4vw;
|
||
font-size: 0.75rem;
|
||
background: rgb(51 65 85 / 30%);
|
||
border: 1px solid #1e40af;
|
||
border-radius: 0.37vh;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.alert-text.error {
|
||
color: #f00;
|
||
}
|
||
|
||
.alert-text.warn {
|
||
color: #ff0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-bottom {
|
||
/* 设置重复方式 */
|
||
|
||
display: flex;
|
||
background-image:
|
||
url('@/assets/images/screen/right_top_img.png'),
|
||
url('@/assets/images/screen/right_center_img.png'),
|
||
url('@/assets/images/screen/right_bottom_img.png');
|
||
background-position:
|
||
top center,
|
||
right center,
|
||
bottom center;
|
||
|
||
/* 设置大小，注意中间的背景图应该覆盖整个容器 */
|
||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||
|
||
/* 设置位置 */
|
||
background-size:
|
||
100% 90px,
|
||
cover,
|
||
100% 68px;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
|
||
.tip-container {
|
||
position: relative;
|
||
display: flex;
|
||
width: 50%;
|
||
height: 80px;
|
||
padding-right: 20px;
|
||
align-items: center;
|
||
justify-content: end;
|
||
|
||
.tip-image {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%) translateX(-50%);
|
||
|
||
.number {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
font-size: 1rem;
|
||
color: #fff;
|
||
transform: translate(-80%, -50%);
|
||
}
|
||
}
|
||
|
||
.tip-content {
|
||
position: absolute;
|
||
inset: 0% 0 0 6%;
|
||
display: flex;
|
||
padding-left: 20px;
|
||
align-items: center;
|
||
|
||
.col-item {
|
||
display: flex;
|
||
margin-left: 1vw;
|
||
align-items: center;
|
||
|
||
span {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
display: flex;
|
||
width: 68%;
|
||
height: calc(100% - 100px);
|
||
margin-top: 20px;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
|
||
.list-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
width: 100%;
|
||
max-height: 22vh;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.list-wrapper {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-top: 10px;
|
||
overflow: hidden scroll;
|
||
flex-direction: column;
|
||
row-gap: 4px;
|
||
}
|
||
|
||
.list-item {
|
||
display: inline-flex;
|
||
padding: 0.5vh 0.4vw;
|
||
font-size: 0.75rem;
|
||
background: rgb(51 65 85 / 30%);
|
||
border: 1px solid #1e40af;
|
||
border-radius: 0.37vh;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.alert-text.error {
|
||
color: #f00;
|
||
}
|
||
|
||
.alert-text.warn {
|
||
color: #ff0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-container {
|
||
position: fixed;
|
||
top: 55%;
|
||
left: 50%;
|
||
z-index: 1;
|
||
display: flex;
|
||
width: 65vh;
|
||
height: 65vh;
|
||
color: #fff;
|
||
background-image: url('@/assets/images/circle_bg.png');
|
||
background-size: cover;
|
||
transform: translate(-50%, -50%);
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.center-content {
|
||
display: flex;
|
||
// background: rgba(255, 22, 1, 0.3);
|
||
width: 77%;
|
||
height: 77%;
|
||
overflow: hidden;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
margin-top: 2vh;
|
||
font-size: 0.9rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bottom-border-line {
|
||
width: 20%;
|
||
margin: 1vh 0 1.2vh;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.type-wrapper {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 80%;
|
||
font-size: 0.8rem;
|
||
color: #fff;
|
||
|
||
.type-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 0.5vh;
|
||
|
||
.type-btn {
|
||
padding: 2px 30px;
|
||
margin-bottom: 5px;
|
||
font-size: 0.7rem;
|
||
background-color: #d97706;
|
||
border-radius: 15px;
|
||
|
||
&.active {
|
||
background-color: #059669;
|
||
}
|
||
}
|
||
|
||
.type-num {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.clasic-wrapper {
|
||
display: flex;
|
||
width: 80%;
|
||
margin-top: 1.2vh;
|
||
font-size: 0.8rem;
|
||
color: #fff;
|
||
justify-content: space-around;
|
||
|
||
.clasic-item {
|
||
display: flex;
|
||
width: 45%;
|
||
margin-top: 0.6vh;
|
||
margin-bottom: -1vh;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.echart-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 85%;
|
||
height: 75%;
|
||
|
||
.lf-rt {
|
||
display: flex;
|
||
width: 50%;
|
||
height: 100%;
|
||
flex-direction: column;
|
||
|
||
.progress-chart {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 80%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.progress-legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.safe-wrapper {
|
||
display: flex;
|
||
width: 40%;
|
||
height: 20%;
|
||
margin-bottom: 5%;
|
||
align-items: center;
|
||
column-gap: 1vw;
|
||
|
||
.safe-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 1vw;
|
||
}
|
||
|
||
.pending-count {
|
||
margin-bottom: 0.7vh;
|
||
font-size: 1.6rem;
|
||
font-weight: 500;
|
||
color: yellow;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 全局样式 */
|
||
</style>
|