更新代码
This commit is contained in:
File diff suppressed because it is too large
Load Diff
74
src/views/home/components/bar.vue
Normal file
74
src/views/home/components/bar.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
|
||||
<div ref="vehicleChartRef" id="bar-main"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted ,onUnmounted} from 'vue';
|
||||
import * as echarts from 'echarts'
|
||||
let myChart = null
|
||||
const getLine = async () => {
|
||||
var chartDom = document.getElementById('bar-main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [10, 52, 200, 334, 390, 330, 220]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
myChart?.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
getLine()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
myChart?.dispose()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#bar-main{
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div class="checkpoint-list">
|
||||
<div class="checkpoint-item" v-for="(item, index) in checkpoints" :key="index">
|
||||
<div class="checkpoint-icon">
|
||||
<img src="@/assets/images/bg_11.png" alt="检查站">
|
||||
</div>
|
||||
<div class="checkpoint-info">
|
||||
<span class="checkpoint-name">{{ item.name }}：</span>
|
||||
<span class="checkpoint-count">{{ item.count }} 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checkpoints = ref([
|
||||
{
|
||||
name: '玉普一级检查站',
|
||||
count: 100
|
||||
},
|
||||
{
|
||||
name: '京瓦龙一级检查站',
|
||||
count: 100
|
||||
},
|
||||
{
|
||||
name: '岗庙边境检查站',
|
||||
count: 100
|
||||
},
|
||||
{
|
||||
name: '察隅边境检查站',
|
||||
count: 100
|
||||
},
|
||||
{
|
||||
name: '金东边境检查站',
|
||||
count: 100
|
||||
},
|
||||
{
|
||||
name: '达木边境检查站',
|
||||
count: 100
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.checkpoint-list {
|
||||
margin-top: 20px;
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.checkpoint-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.checkpoint-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.checkpoint-icon img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: brightness(0) invert(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.checkpoint-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkpoint-name {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.checkpoint-count {
|
||||
color: #00f0ff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="data-statistics">
|
||||
<!-- 人员数据采集 -->
|
||||
<div class="data-collection">
|
||||
<h2 class="section-title">人员数据采集</h2>
|
||||
<div class="statistics-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">50</div>
|
||||
<div class="f14">人证核验</div>
|
||||
<div><img src="@/assets/images/bg_03.png" alt=""></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">320</div>
|
||||
<div class="f14">无感通行</div>
|
||||
<div><img src="@/assets/images/bg_04.png" alt=""></div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">100</div>
|
||||
<div class="f14">手持终端登记</div>
|
||||
<div><img src="@/assets/images/bg_05.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流入流出统计 -->
|
||||
<div class="flow-statistics">
|
||||
<h2 class="section-title">流入流出统计</h2>
|
||||
<div class="flow-grid">
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon"><img width="64" src="@/assets/images/bg_06.png" alt=""></div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林人员</span>
|
||||
<span class="flow-number">2000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon"><img width="64" src="@/assets/images/bg_06.png" alt=""></div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林人员</span>
|
||||
<span class="flow-number">300</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon"><img width="64" src="@/assets/images/bg_07.png" alt=""></div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">进林车辆</span>
|
||||
<span class="flow-number">500</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-item">
|
||||
<div class="flow-icon"><img width="64" src="@/assets/images/bg_07.png" alt=""></div>
|
||||
<div class="flow-info">
|
||||
<span class="flow-label">出林车辆</span>
|
||||
<span class="flow-number">666</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 可以在这里添加需要的响应式数据和方法
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-statistics {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59A6F4 0%,#ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url('~@/assets/images/bg_02.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.statistics-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
color: #00f0ff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.flow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.flow-icon {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.flow-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flow-number {
|
||||
font-size: 24px;
|
||||
color: #00f0ff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
57
src/views/home/components/line.vue
Normal file
57
src/views/home/components/line.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
|
||||
<div ref="vehicleChartRef" id="chart-container"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted ,onUnmounted} from 'vue';
|
||||
import * as echarts from 'echarts'
|
||||
let myChart = null
|
||||
const getLine = async () => {
|
||||
var chartDom = document.getElementById('chart-container');
|
||||
console.log("chartDom")
|
||||
myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
console.log("option", option);
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
myChart?.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
getLine()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
myChart?.dispose()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#chart-container{
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="map-container">
|
||||
<div ref="chartRef" class="chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
|
||||
const chartRef = ref(null)
|
||||
let chart = null
|
||||
|
||||
const initChart = async () => {
|
||||
// 使用require方式导入静态资源
|
||||
const baseImg = require('@/assets/images/map-marker.svg')
|
||||
|
||||
try {
|
||||
// 确保图片加载完成
|
||||
await new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.onload = resolve
|
||||
img.onerror = reject
|
||||
img.src = baseImg
|
||||
})
|
||||
|
||||
let geoJson = require('./511202.json')
|
||||
chart = echarts.init(chartRef.value)
|
||||
echarts.registerMap('myMap', geoJson)
|
||||
|
||||
// 异步加载撒点数据
|
||||
const markerData = [
|
||||
{ name: '站点1', value: [102.651727, 30.117088, 3] },
|
||||
{ name: '站点2', value: [102.527442, 30.108846, 3] },
|
||||
{ name: '站点3', value: [102.801965, 30.100063, 3] },
|
||||
{ name: '站点4', value: [102.711411, 30.158424, 3] },
|
||||
{ name: '站点5', value: [102.579582, 30.174818, 3] }
|
||||
]
|
||||
|
||||
const option = {
|
||||
geo3D: {
|
||||
map: 'myMap',
|
||||
regionHeight: 6,
|
||||
shading: 'realistic',
|
||||
realisticMaterial: {
|
||||
roughness: 0.2,
|
||||
metalness: 0
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.2)',
|
||||
opacity: 0.9,
|
||||
borderWidth: 1,
|
||||
borderColor: '#61CFF8',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(1,59,110,0.5)',
|
||||
borderWidth: 10,
|
||||
borderColor: 'rgba(10,148,184,1)'
|
||||
}
|
||||
},
|
||||
light: {
|
||||
main: {
|
||||
color: '#fff',
|
||||
intensity: 1,
|
||||
shadow: true,
|
||||
shadowQuality: 'high',
|
||||
alpha: 25,
|
||||
beta: 20
|
||||
},
|
||||
ambient: {
|
||||
color: '#fff',
|
||||
intensity: 0.6
|
||||
}
|
||||
},
|
||||
viewControl: {
|
||||
distance: 150,
|
||||
alpha: 46,
|
||||
beta: 30,
|
||||
},
|
||||
postEffect: {
|
||||
enable: true,
|
||||
bloom: {
|
||||
enable: true,
|
||||
intensity: 0.1
|
||||
}
|
||||
},
|
||||
temporalSuperSampling: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'scatter3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
symbol: 'image://' + baseImg,
|
||||
symbolSize: [40, 40],
|
||||
itemStyle: {
|
||||
color: '#00f0ff',
|
||||
opacity: 1
|
||||
},
|
||||
data: markerData
|
||||
}]
|
||||
}
|
||||
|
||||
// 确保DOM已经渲染完成
|
||||
await nextTick()
|
||||
chart.setOption(option)
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
chart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
73
src/views/home/components/pei.vue
Normal file
73
src/views/home/components/pei.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
|
||||
<div ref="vehicleChartRef" id="pei-main"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted ,onUnmounted} from 'vue';
|
||||
import * as echarts from 'echarts'
|
||||
let myChart = null
|
||||
const getLine = async () => {
|
||||
var chartDom = document.getElementById('pei-main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: 'Referer of a Website',
|
||||
subtext: 'Fake Data',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
myChart?.resize()
|
||||
}
|
||||
onMounted(() => {
|
||||
getLine()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
myChart?.dispose()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#pei-main{
|
||||
z-index:999;
|
||||
}
|
||||
</style>
|
||||
49
src/views/home/components/top-icon.vue
Normal file
49
src/views/home/components/top-icon.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="top-icon-container">
|
||||
<div v-for="(item, index) in list" :key="`list${index}`" class="top-icon-item">
|
||||
<img :src="item.icon" alt="">
|
||||
<div>
|
||||
<div>{{ item.title }}</div>
|
||||
<div style="font-size:10px">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yjbk"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const list = ref([{
|
||||
icon: require("@/assets/images/databi/tianqi.png"),
|
||||
title: "多云转小雨",
|
||||
desc: "无持续风向微风",
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/databi/wendu.png"),
|
||||
title: "36°",
|
||||
desc: "11°~26°",
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/databi/time.png"),
|
||||
title: "20:30:59",
|
||||
desc: "星期二 2024-12-17",
|
||||
}
|
||||
|
||||
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-icon-container{
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
.top-icon-item{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.yjbk{
|
||||
background: url("~@/assets/images/databi/head-1.png") no-repeat center center;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<div class="warning-analysis">
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">车辆预警分析</h2>
|
||||
<div ref="vehicleChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">人员预警分析</h2>
|
||||
<div ref="personChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const vehicleChartRef = ref(null)
|
||||
const personChartRef = ref(null)
|
||||
let vehicleChart = null
|
||||
let personChart = null
|
||||
|
||||
const createChartOption = (data, colors) => {
|
||||
return {
|
||||
title: {
|
||||
text: '100',
|
||||
subtext: '总数',
|
||||
left: '20%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '45%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff'
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (name) => {
|
||||
const item = data.find(d => d.name === name)
|
||||
return `${name} ${item.value} {${item.colorType}|(${item.value}%)}`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
center: ['25%', '50%'],
|
||||
data: data.map(item => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'none'
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['65%', '85%'],
|
||||
center: ['50%', '50%'],
|
||||
data: data.map(item => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'none'
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const initCharts = () => {
|
||||
const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
|
||||
|
||||
// 车辆预警数据
|
||||
const vehicleData = [
|
||||
{
|
||||
value: 25,
|
||||
name: '盗窃车辆',
|
||||
colorType: 'blue',
|
||||
color: ['#00f0ff', '#00a0cc']
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '车牌与车辆不符',
|
||||
colorType: 'lightBlue',
|
||||
color: ['#0066ff', '#0044cc']
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '车辆超高',
|
||||
colorType: 'orange',
|
||||
color: ['#ff9900', '#cc7a00']
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: '车辆超限',
|
||||
colorType: 'green',
|
||||
color: ['#00cc66', '#009944']
|
||||
}
|
||||
]
|
||||
|
||||
// 人员预警数据
|
||||
const personData = [
|
||||
{
|
||||
value: 25,
|
||||
name: '涉稳人员',
|
||||
colorType: 'blue',
|
||||
color: ['#00f0ff', '#00a0cc']
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '涉毒人员',
|
||||
colorType: 'lightBlue',
|
||||
color: ['#0066ff', '#0044cc']
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
name: '涉黄人员',
|
||||
colorType: 'orange',
|
||||
color: ['#ff9900', '#cc7a00']
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: '前科人员',
|
||||
colorType: 'green',
|
||||
color: ['#00cc66', '#009944']
|
||||
}
|
||||
]
|
||||
|
||||
vehicleChart = echarts.init(vehicleChartRef.value)
|
||||
personChart = echarts.init(personChartRef.value)
|
||||
|
||||
vehicleChart.setOption(createChartOption(vehicleData, colors))
|
||||
personChart.setOption(createChartOption(personData, colors))
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
vehicleChart?.resize()
|
||||
personChart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCharts()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
vehicleChart?.dispose()
|
||||
personChart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-analysis {
|
||||
padding: 20px;
|
||||
background-color: #001529;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59A6F4 0%,#ffffff 90%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: url('~@/assets/images/bg_02.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<div class="warning-container">
|
||||
<!-- 标签切换 -->
|
||||
<div class="tab-container">
|
||||
<div class="tab-item active">
|
||||
<div class="tab-content">车辆预警</div>
|
||||
</div>
|
||||
<div class="tab-item">
|
||||
<div class="tab-content">人员预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预警列表 -->
|
||||
<div class="warning-list">
|
||||
<div class="warning-card" v-for="(item, index) in warningList" :key="index">
|
||||
<div class="warning-image">
|
||||
<img :src="item.image" alt="预警图片">
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="tag">涉警人员</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">性别：</span>
|
||||
<span>{{ item.gender }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.similarity }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.warningTime }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.location }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const warningList = ref([
|
||||
{
|
||||
image: require('@/assets/images/person.png'),
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
similarity: 85,
|
||||
warningTime: '2025-02-15 13: 00',
|
||||
location: '林艺市八宫区天山路宫区天山路宫区天山路'
|
||||
},
|
||||
{
|
||||
image: require('@/assets/images/person.png'),
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
similarity: 85,
|
||||
warningTime: '2025-02-15 13: 00',
|
||||
location: '林艺市八宫区天山路宫区天山路宫区天山路'
|
||||
},
|
||||
{
|
||||
image: require('@/assets/images/person.png'),
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
similarity: 85,
|
||||
warningTime: '2025-02-15 13: 00',
|
||||
location: '林艺市八宫区天山路...'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
width: 159px;
|
||||
height: 43px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 8px 30px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg_08.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.tab-item.active::before {
|
||||
background: url("~@/assets/images/bg_09.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.warning-list {
|
||||
height: calc(100% - 64px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/bg_10.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #00f0ff;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(250, 177, 21, 0.9);
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,129 +1,608 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<!-- 头部 -->
|
||||
<div class="head">
|
||||
<Head></Head>
|
||||
<!-- 内容 -->
|
||||
<div class="home-contant">
|
||||
<!-- 左边 -->
|
||||
<div class="home-aside asideL">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">数据采集</div>
|
||||
<div class="comom-cnt">
|
||||
<Collection></Collection>
|
||||
<TopIcon class="head-icon-l"></TopIcon>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
<el-container class="container" direction="horizontal">
|
||||
<el-aside style="width:455px">
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">线索研判盯办统计</span>
|
||||
</div>
|
||||
<div class="content background-img-1" style="height:106px">
|
||||
<div class="content-item" v-for="(value, key) in contentItem" :key="`contentItem${key}`">
|
||||
{{ key }}:{{ value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">预警信息</div>
|
||||
<div class="comom-cnt">
|
||||
<Warning></Warning>
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">情报上报数量</span>
|
||||
</div>
|
||||
<!-- <div class="content background-img-2" style="height:185px">
|
||||
|
||||
</div> -->
|
||||
<Line class="content background-img-2" style="height:175px"></Line>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">情报数据情报来源</span>
|
||||
</div>
|
||||
<!-- <div class="content background-img-2" style="height:185px">
|
||||
</div> -->
|
||||
<Bar class="content background-img-2" style="height:175px"></Bar>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">情报反馈统计</span>
|
||||
</div>
|
||||
<!-- <div class="content background-img-3" style="height:234px">
|
||||
</div> -->
|
||||
<Pei class="content background-img-3" style="height:234px">
|
||||
</Pei>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main class="h-100 main">
|
||||
<div class="top">
|
||||
|
||||
<div class="top-item" v-for="(item, index) in topRightTile" :key="`topRightTile${index}`">
|
||||
<img :src="item.icon" alt="" class="top-icon" />
|
||||
<div class="top-item-right">
|
||||
<div class="top-item-title">{{ item.title }}</div>
|
||||
<div class="top-item-title-tow">{{ item.desc }}</div>
|
||||
<img src="~@/assets/images/databi/line.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="med content background-img-4" style="height:calc(100% - 338px)">
|
||||
</div>
|
||||
<div class="footer " style="height:234px">
|
||||
<div class="content-box">
|
||||
<div class="title-box title-img-2">
|
||||
<div class="flexcb">
|
||||
<div>
|
||||
<span class="title">全域布控处置重点人员</span>
|
||||
<span class="title-desc">全域布控处置重点群体</span>
|
||||
</div>
|
||||
<div class="btn">
|
||||
查看更多》
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content background-img-5" style="height:234px">
|
||||
<MyTable :tableData="pageData.tableData1" :tableColumn="pageData.tableColumn1"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth" class="my-table">
|
||||
<template #zp="{ row }">
|
||||
<el-image style="width: 40px; height: 40px" :src="row.zp">
|
||||
</el-image>
|
||||
</template>
|
||||
<template #clzt="{ row }">
|
||||
<span style="color: #FDBC3A ;">{{ row.clzt }}</span>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<div class="home-middle">
|
||||
<Mapecharts></Mapecharts>
|
||||
</div>
|
||||
<!-- 右边 -->
|
||||
<div class="home-aside asideR">
|
||||
<div class="asideL-top">
|
||||
<div class="common-title">值班备勤</div>
|
||||
<div class="comom-cnt">
|
||||
<BeOnDuty></BeOnDuty>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">情报上报数量</span>
|
||||
</div>
|
||||
<div class="content right-1" style="height:251px">
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
|
||||
{{ city }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<div class="warning-list">
|
||||
<div class="warning-card" v-for="(item, index) in warningList" :key="index">
|
||||
<div class="warning-image">
|
||||
<img :src="item.image" alt="预警图片">
|
||||
</div>
|
||||
<div class="warning-info">
|
||||
<div class="info-item">
|
||||
<span class="label">姓名：</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="tag">涉警人员</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">性别：</span>
|
||||
<span>{{ item.gender }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">相似度：</span>
|
||||
<span class="highlight">{{ item.similarity }}%</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span>{{ item.warningTime }}</span>
|
||||
</div>
|
||||
<div class="info-item flex align-center">
|
||||
<span class="label nowrap">抓拍地址：</span>
|
||||
<span class="one_text_detail">{{ item.location }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="asideL-bottom">
|
||||
<div class="common-title">预警统计分析</div>
|
||||
<div class="comom-cnt">
|
||||
<WanringAnyse></WanringAnyse>
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">情报上报数量</span>
|
||||
</div>
|
||||
<div class="content right-2" style="height:244px">
|
||||
<MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth" class="my-table">
|
||||
<template #zp="{ row }">
|
||||
<el-image style="width: 40px; height: 40px" :src="row.zp">
|
||||
</el-image>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="title-box">
|
||||
<span class="title">重点人发掘情况</span>
|
||||
</div>
|
||||
<div class="content right-3" style="height:234px">
|
||||
<MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
|
||||
:tableHeight="pageData.tableHeight" :key="pageData.keyCount+2" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth" class="my-table">
|
||||
<template #zp="{ row }">
|
||||
<el-image style="width: 40px; height: 40px" :src="row.zp">
|
||||
</el-image>
|
||||
</template>
|
||||
</MyTable>
|
||||
</div>
|
||||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from './layout/head.vue'
|
||||
import Collection from './components/collection.vue'
|
||||
import Warning from './components/warning.vue'
|
||||
import BeOnDuty from './components/beonDuty.vue'
|
||||
import WanringAnyse from './components/wanringAnyse.vue'
|
||||
import Mapecharts from './components/mapecharts.vue'
|
||||
import { ref } from 'vue';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Line from './components/line.vue'
|
||||
import Bar from './components/bar.vue'
|
||||
import Pei from './components/pei.vue'
|
||||
import TopIcon from './components/top-icon.vue'
|
||||
|
||||
|
||||
const contentItem = ref(
|
||||
|
||||
{
|
||||
'线索总数': "892条", "下发总数": "892条", "已处置总数": "892条", "反馈总数": "892条", "未反馈总数": "892条", "未处置总数": "892条"
|
||||
})
|
||||
const topRightTile = ref([
|
||||
{
|
||||
title: "线索总数",
|
||||
desc: "25",
|
||||
icon: require("@/assets/images/databi/top-1.png"),
|
||||
|
||||
}, {
|
||||
title: "已处理线索总数",
|
||||
desc: "5222/3",
|
||||
icon: require("@/assets/images/databi/top-2.png"),
|
||||
|
||||
}, {
|
||||
title: "重点人总数",
|
||||
desc: "100.0",
|
||||
icon: require("@/assets/images/databi/top-3.png"),
|
||||
|
||||
}, {
|
||||
title: "重点群体总数",
|
||||
desc: "99.9",
|
||||
icon: require("@/assets/images/databi/top-4.png"),
|
||||
|
||||
}
|
||||
])
|
||||
const pageData = reactive({
|
||||
tableData1: [
|
||||
|
||||
{
|
||||
zp: require("@/assets/images/databi/top-1.png"),
|
||||
name: "12344",
|
||||
xb: "12344",
|
||||
sfzh: "12344",
|
||||
gkdw: "12344",
|
||||
hdsj: "12344",
|
||||
hdfsdz: "12344",
|
||||
clzt: "12344",
|
||||
}
|
||||
|
||||
],
|
||||
tableData2: [{
|
||||
zp: require("@/assets/images/databi/top-1.png"),
|
||||
|
||||
name: "123",
|
||||
xb: "123",
|
||||
sfzh: "123",
|
||||
gkyy: "123",
|
||||
}],
|
||||
|
||||
//表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "null",
|
||||
loading: false,
|
||||
border: false,
|
||||
size: "small",
|
||||
haveControls: false,
|
||||
stripe: true
|
||||
},
|
||||
tableHeight: '100%',
|
||||
tableColumn1: [
|
||||
{ label: "照片", prop: "zp", showSolt: true },
|
||||
{ label: "姓名", prop: "name" },
|
||||
{ label: "性别", prop: "xb", },
|
||||
{ label: "身份证号", prop: "sfzh", },
|
||||
{ label: "管控单位", prop: "gkdw" },
|
||||
|
||||
{ label: " 活动时间", prop: "hdsj", },
|
||||
{ label: " 活动发生地址", prop: "hdfsdz", },
|
||||
|
||||
{ label: " 处置状态", prop: "clzt", showSolt: true }
|
||||
],
|
||||
tableColumn2: [
|
||||
{ label: "照片", prop: "zp", showSolt: true ,},
|
||||
{ label: "姓名", prop: "name", width:50},
|
||||
{ label: "性别", prop: "xb", width:50},
|
||||
{ label: "身份证号", prop: "sfzh", },
|
||||
{ label: "管控原因", prop: "gkyy",width:100 },
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(true)
|
||||
const checkedCities = ref(['全部'])
|
||||
const cities = ['全部', '红色', '橙色', '黄色', '蓝色']
|
||||
|
||||
const handleCheckAllChange = (val) => {
|
||||
checkedCities.value = val ? cities : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedCitiesChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === cities.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
|
||||
}
|
||||
|
||||
const warningList = ref([
|
||||
{
|
||||
image: require('@/assets/images/person.png'),
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
similarity: 85,
|
||||
warningTime: '2025-02-15 13: 00',
|
||||
location: '林艺市八宫区天山路宫区天山路宫区天山路'
|
||||
},
|
||||
{
|
||||
image: require('@/assets/images/person.png'),
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
similarity: 85,
|
||||
warningTime: '2025-02-15 13: 00',
|
||||
location: '林艺市八宫区天山路宫区天山路宫区天山路'
|
||||
},
|
||||
{
|
||||
image: require('@/assets/images/person.png'),
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
similarity: 85,
|
||||
warningTime: '2025-02-15 13: 00',
|
||||
location: '林艺市八宫区天山路...'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.homeBox{
|
||||
<style lang="scss">
|
||||
.container {
|
||||
height: calc(100% - 67px);
|
||||
width: 100%;
|
||||
margin-top: -61px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px 20px 30px;
|
||||
|
||||
.content-box {
|
||||
margin-top: 4px;
|
||||
|
||||
.title-img-2 {
|
||||
background: url("~@/assets/images/databi/title-box-2.png") no-repeat center center !important;
|
||||
|
||||
.title-desc {
|
||||
font-size: 14px;
|
||||
color: #98BCE0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
color: #0072FF;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-box {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background: url("~@/assets/images/databi/title-box.png") no-repeat center center;
|
||||
position: relative;
|
||||
line-height: 35px;
|
||||
|
||||
.title {
|
||||
margin-left: 60px;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.background-img-1 {
|
||||
background: url("~@/assets/images/databi/content-box.png") no-repeat center center;
|
||||
}
|
||||
|
||||
.background-img-2 {
|
||||
background: url("~@/assets/images/databi/content-box-2.png") no-repeat center center;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.background-img-3 {
|
||||
background: url("~@/assets/images/databi/content-box-3.png") no-repeat center center;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.background-img-4 {
|
||||
background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.background-img-5 {
|
||||
background: url("~@/assets/images/databi/content-box-4.png") no-repeat center center;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.right-1 {
|
||||
background: url("~@/assets/images/databi/right-1.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
|
||||
.warning-list {
|
||||
height: 205px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
background: url("~@/assets/images/databi/blue.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 4px;
|
||||
padding: 4px 4px 4px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.warning-image {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
background: url("~@/assets/images/databi/right-2.png") no-repeat center center;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.right-3 {
|
||||
background: url("~@/assets/images/databi/right-3.png") no-repeat center center;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
.content-item {
|
||||
width: 138px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/databi/content-item.png") no-repeat center center;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-main {
|
||||
padding: 10px;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
|
||||
.top-item {
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
|
||||
.top-icon {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top-item-right {
|
||||
font-size: 12px;
|
||||
|
||||
.top-item-title {
|
||||
color: #0072FF;
|
||||
}
|
||||
|
||||
.top-item-title-tow {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.med {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
// margin-top: 4px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-footer {
|
||||
padding: 0 !important;
|
||||
height: 100% !important;
|
||||
width: 455px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.homeBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.home-contant{
|
||||
display: flex;
|
||||
background: url("~@/assets/images/databi/cantainer.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.head{
|
||||
position: relative;
|
||||
.head-icon-l{
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 72px);
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
.home-aside{
|
||||
width: 442px;
|
||||
height: 100%;
|
||||
}
|
||||
.home-middle{
|
||||
flex: 1 0 0;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/bg01.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 22px;
|
||||
}
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
// 左边
|
||||
.asideL{
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
.asideL-top{
|
||||
height: 60%;
|
||||
background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom{
|
||||
height: 40%;
|
||||
background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
// 右边
|
||||
.asideR{
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
.asideL-top{
|
||||
height: 40%;
|
||||
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.asideL-bottom{
|
||||
height: 60%;
|
||||
background: url("~@/assets/images/border_R_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.my-table :deep(.el-table--fit) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// 公用
|
||||
.common-title{
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
font-size: 22px;
|
||||
font-family: 'YSBTH';
|
||||
background: linear-gradient(0deg, #59A6F4 0%,#ffffff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
.my-table .el-table,
|
||||
.el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
.comom-cnt{
|
||||
height: calc(100% - 30px);
|
||||
padding: 4px 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.my-table :deep(.el-table) tr {
|
||||
background-color: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-table th,
|
||||
.el-table tr {
|
||||
border: 0 !important;
|
||||
background-color: transparent !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||||
background: #003D82;
|
||||
opacity: 75%;
|
||||
}
|
||||
|
||||
.el-table--border tr,
|
||||
td {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* 去最下面的横线 */
|
||||
|
||||
.el-table::after {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
/*table内的高亮*/
|
||||
|
||||
.el-table tbody tr:hover>td {
|
||||
|
||||
background-color: transparent !important
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.el-checkbox__inner {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #0072FF;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #00FFFF !important;
|
||||
}
|
||||
|
||||
.el-checkbox__inner::after {
|
||||
border-color: black !important;
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user