新版式
This commit is contained in:
duanliang
Binary file not shown.
Binary file not shown.
14
src/App.vue
14
src/App.vue
@@ -3,16 +3,18 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="wrapper"> <RouterView /> </main>
|
||||
<main class="wrapper">
|
||||
<RouterView />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0a254b;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -12,6 +12,7 @@ const instance = axios.create({
|
||||
timeout: 100000,
|
||||
headers: {
|
||||
Authorization: mode == 'dev' ? devToken : proToken,
|
||||
'User-Type':'2',
|
||||
'Content-Type': 'application/json;charset=UTF-8'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
top: '20%',
|
||||
textStyle: {
|
||||
color: '#00D0FF',
|
||||
fontSize: fitChartSize(18)
|
||||
fontSize: fitChartSize(24)
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -66,7 +66,7 @@
|
||||
top: '50%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(16)
|
||||
fontSize: fitChartSize(22)
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -91,13 +91,13 @@
|
||||
[0, '#075199'],
|
||||
[1, '#075199']
|
||||
],
|
||||
width: fitChartSize(6)
|
||||
width: fitChartSize(10)
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: fitChartSize(6)
|
||||
width: fitChartSize(10)
|
||||
},
|
||||
pointer: {
|
||||
// 指针
|
||||
@@ -143,13 +143,13 @@
|
||||
[0, '#075199'],
|
||||
[1, '#075199']
|
||||
],
|
||||
width: fitChartSize(6)
|
||||
width: fitChartSize(10)
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: false,
|
||||
width: fitChartSize(6)
|
||||
width: fitChartSize(10)
|
||||
},
|
||||
pointer: {
|
||||
// 指针
|
||||
|
||||
@@ -52,32 +52,34 @@
|
||||
flex: 1;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
margin-left: vw(4);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.count {
|
||||
position: relative;
|
||||
margin-top: vh(10);
|
||||
margin-top: vh(30);
|
||||
z-index: 1;
|
||||
.value {
|
||||
padding-left: vw(20);
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(38);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.suffix {
|
||||
margin-top: vh(4);
|
||||
// margin-top: vh(34);
|
||||
font-weight: bold;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(18);
|
||||
color: #02f9fa;
|
||||
margin-left:vw(5);
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: vw(134);
|
||||
height: vh(30);
|
||||
width: vw(184);
|
||||
height: vh(50);
|
||||
line-height: vh(50);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
border: 1px solid #0096FF;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: ${fitChartSize(16)}px;
|
||||
font-size: ${fitChartSize(18)}px;
|
||||
border-radius: ${fitChartSize(4)}px;
|
||||
padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
|
||||
${valueStr}</div>`
|
||||
@@ -103,12 +103,12 @@
|
||||
x: 'center',
|
||||
y: 'top',
|
||||
icon: 'rect',
|
||||
itemWidth: fitChartSize(8),
|
||||
itemHeight: fitChartSize(4),
|
||||
itemGap: fitChartSize(10),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemHeight: fitChartSize(12),
|
||||
itemGap: fitChartSize(12),
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(22)
|
||||
}
|
||||
},
|
||||
title: {
|
||||
@@ -127,14 +127,14 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
|
||||
@@ -113,20 +113,21 @@
|
||||
color: colorList,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: '64%',
|
||||
y: 'center',
|
||||
itemWidth: fitChartSize(12),
|
||||
itemHeight: fitChartSize(12),
|
||||
x: 'center',
|
||||
y: '80%',
|
||||
bottom:'20%',
|
||||
itemWidth: fitChartSize(22),
|
||||
itemHeight: fitChartSize(22),
|
||||
itemGap: fitChartSize(10),
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(22)
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['30%', '50%'],
|
||||
center: ['50%', '30%'],
|
||||
radius: ['40%', '55%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
@@ -142,13 +143,13 @@
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontSize: fitChartSize(22),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(20)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -182,7 +183,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:font-vw(22);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
|
||||
@@ -81,7 +81,8 @@
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
show: false,
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
@@ -114,7 +115,7 @@
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(18),
|
||||
fontSize: fitChartSize(11),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, -fitChartSize(10), fitChartSize(10), 0],
|
||||
inside: true,
|
||||
@@ -125,7 +126,7 @@
|
||||
value: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(20)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -148,7 +149,7 @@
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontSize: fitChartSize(20),
|
||||
formatter: function (params) {
|
||||
return params.data.name ?? '其他'
|
||||
}
|
||||
@@ -186,7 +187,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:vw(20);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
@@ -194,7 +195,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.top {
|
||||
width: vw(250);
|
||||
height: vh(366);
|
||||
width: vw(290);
|
||||
height: vh(650);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
legend: {
|
||||
show: true,
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
y: '75%',
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemGap: fitChartSize(6),
|
||||
@@ -113,12 +113,12 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
value: {
|
||||
color: '#00D5F6',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -165,7 +165,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:fonnt-vw(20);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
@@ -228,12 +228,12 @@
|
||||
}
|
||||
&-item-label {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: vw(18);
|
||||
line-height: vh(14);
|
||||
}
|
||||
&-item-value {
|
||||
font-weight: bold;
|
||||
font-size: vw(16);
|
||||
font-size: vw(22);
|
||||
line-height: vh(18);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,9 +20,9 @@
|
||||
.title-1 {
|
||||
position: relative;
|
||||
.title {
|
||||
margin: vh(10) auto;
|
||||
width: vw(468);
|
||||
height: vh(32);
|
||||
margin: vh(20) auto;
|
||||
width: vw(600);
|
||||
height: vh(88);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -30,7 +30,7 @@
|
||||
background-size: 100% 100%;
|
||||
& > span {
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(22);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title-2 {
|
||||
width: vw(240);
|
||||
height: vh(28);
|
||||
min-width: vw(240);
|
||||
height: vh(80);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-image: url('@/assets/images/title-5.png');
|
||||
@@ -42,12 +42,12 @@
|
||||
.item{
|
||||
// margin-right: vw(22);
|
||||
padding:vw(5) vw(10);
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
// border-bottom:1px solid #ccc;
|
||||
}
|
||||
& span {
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(24);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
.title-3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(12);
|
||||
height: vh(22);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -26,7 +26,7 @@
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="correspondence">
|
||||
<div class="top-box">
|
||||
<div class="title">融合通信</div>
|
||||
<div class="icon-box flex">
|
||||
<div class="icon-box flex" style="height: initial;">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in deptsList"
|
||||
@@ -340,6 +340,8 @@
|
||||
.item-name {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
font-size:vw(18);
|
||||
}
|
||||
.sp-img {
|
||||
width: vw(100);
|
||||
@@ -347,7 +349,8 @@
|
||||
.correspondence {
|
||||
margin: vw(8);
|
||||
width: vw(300);
|
||||
height: vh(1070);
|
||||
// height: vh(1070);
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@@ -370,11 +373,11 @@
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: vh(5);
|
||||
margin-top: vh(20);
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: vw(20);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
@@ -446,6 +449,7 @@
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: vh(500);
|
||||
height:50%;
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
@@ -475,7 +479,7 @@
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-size: vw(22);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
|
||||
@@ -94,9 +94,9 @@
|
||||
<img class="icon" src="@/assets/images/back.png" alt="" /> 返回
|
||||
</div>
|
||||
</div>
|
||||
<div class="amplify" @click="handleAmplify">
|
||||
<!-- <div class="amplify" @click="handleAmplify">
|
||||
<img class="icon-qp" src="@/assets/images/qping.png" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -428,8 +428,8 @@
|
||||
left: vw(326);
|
||||
.weather {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: vh(10);
|
||||
right: vw(-300);
|
||||
top: vh(30);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
color: #ffffff;
|
||||
@@ -439,20 +439,20 @@
|
||||
}
|
||||
.date {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: vh(10);
|
||||
left: vw(-300);
|
||||
top: vh(30);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: vh(50);
|
||||
width: vw(130);
|
||||
height: vh(36);
|
||||
right: vw(240);
|
||||
top: vh(30);
|
||||
width: vw(150);
|
||||
height: vh(56);
|
||||
font-weight: 600;
|
||||
font-size: vw(20);
|
||||
font-size: vw(22);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@@ -463,18 +463,18 @@
|
||||
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
||||
.icon {
|
||||
margin-right: vw(10);
|
||||
width: vw(24);
|
||||
width: vw(34);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.back2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: vh(50);
|
||||
width: vw(130);
|
||||
height: vh(36);
|
||||
left: vw(-50);
|
||||
top: vh(30);
|
||||
width: vw(150);
|
||||
height: vh(56);
|
||||
font-weight: 600;
|
||||
font-size: vw(20);
|
||||
font-size: vw(22);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@@ -485,7 +485,7 @@
|
||||
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
|
||||
.icon {
|
||||
margin-right: vw(10);
|
||||
width: vw(24);
|
||||
width: vw(34);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex flex-1">
|
||||
<core-video v-if="homeStore.amplify" />
|
||||
<!-- <core-video v-if="homeStore.amplify" /> -->
|
||||
<div class="mian">
|
||||
<router-view />
|
||||
</div>
|
||||
<correspondence v-if="homeStore.amplify"/>
|
||||
<!-- <correspondence v-if="homeStore.amplify"/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
@use 'sass:math';
|
||||
|
||||
//默认设计稿的宽度
|
||||
$designWidth: 3822;
|
||||
$designWidth: 3840;
|
||||
//默认设计稿的高度
|
||||
$designHeight: 1080;
|
||||
$designHeight: 2160;
|
||||
|
||||
|
||||
//px转为vw的函数
|
||||
@function vw($px) {
|
||||
@@ -14,3 +15,41 @@ $designHeight: 1080;
|
||||
@function vh($px) {
|
||||
@return math.div($px, $designHeight) * 100vh;
|
||||
}
|
||||
// 字体大小转为vw的函数（放大1.4倍）
|
||||
/// 将像素值转换为vw单位，并自动放大1.4倍
|
||||
/// @param {Number} $px - 设计稿中的像素值
|
||||
/// @return {String} - 转换后的vw单位值
|
||||
@function font-vw($px) {
|
||||
$scaled-px: $px * 1.4;
|
||||
@return math.div($scaled-px, $designWidth) * 100vw;
|
||||
}
|
||||
|
||||
// 字体大小转为vh的函数（放大1.4倍）
|
||||
/// 将像素值转换为vh单位，并自动放大1.4倍
|
||||
/// @param {Number} $px - 设计稿中的像素值
|
||||
/// @return {String} - 转换后的vh单位值
|
||||
@function font-vh($px) {
|
||||
$scaled-px: $px * 1.4;
|
||||
@return math.div($scaled-px, $designHeight) * 100vh;
|
||||
}
|
||||
// 字体大小声明mixin（默认使用vw单位）
|
||||
/// 声明字体大小，自动应用1.4倍放大
|
||||
/// @param {Number} $px - 设计稿中的像素值
|
||||
/// @param {String} $unit - 单位类型，可选'vw'或'vh'，默认'vw'
|
||||
@mixin font-size($px, $unit: vw) {
|
||||
@if $unit == vw {
|
||||
font-size: font-vw($px);
|
||||
} @else if $unit == vh {
|
||||
font-size: font-vh($px);
|
||||
} @else {
|
||||
@error "Unsupported unit: #{$unit}. Use 'vw' or 'vh'.";
|
||||
}
|
||||
}
|
||||
// 通用放大函数
|
||||
/// 将值按指定比例放大
|
||||
/// @param {Number} $value - 原始值
|
||||
/// @param {Number} $factor - 放大系数，默认1.4
|
||||
/// @return {Number} - 放大后的值
|
||||
@function scale($value, $factor: 1.4) {
|
||||
@return $value * $factor;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
/* Echarts图表尺寸自适应 */
|
||||
export const fitChartSize = (size, width = 3822) => {
|
||||
export const fitChartSize = (size, width = 3840) => {
|
||||
let clientWidth =
|
||||
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||||
if (!clientWidth) return size
|
||||
let scale = clientWidth / width
|
||||
return Number((size * scale).toFixed(3))
|
||||
return Number((size * scale).toFixed(3))*1.4
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
//默认设计稿的宽度
|
||||
const designWidth = 3822
|
||||
const designWidth = 3840
|
||||
//默认设计稿的高度
|
||||
const designHeight = 1080
|
||||
const designHeight = 2160
|
||||
|
||||
let styleUtil = {
|
||||
// px转vw
|
||||
px2vw: function (_px) {
|
||||
return ((_px * 100.0) / designWidth).toFixed(3) + 'vw'
|
||||
return ((_px * 100.0*4) / designWidth).toFixed(3) + 'vw'
|
||||
},
|
||||
// px转vh
|
||||
px2vh: function (_px) {
|
||||
return ((_px * 100.0) / designHeight).toFixed(3) + 'vh'
|
||||
return ((_px * 100.0*4) / designHeight).toFixed(3) + 'vh'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -370,7 +370,7 @@
|
||||
border:vw(2) solid #0096FF;
|
||||
padding:vh(40) vw(20);
|
||||
position:relative;
|
||||
height:vh(900);
|
||||
height:vh(1950);
|
||||
padding-bottom:vh(20);
|
||||
.item-element{
|
||||
display: flex;
|
||||
@@ -404,7 +404,7 @@
|
||||
width:100%;
|
||||
height:vh(30);
|
||||
padding:0 vw(30);
|
||||
font-size:vw(24);
|
||||
font-size: font-vw(24);
|
||||
line-height:vh(30);
|
||||
// line-height: vh(40);
|
||||
}
|
||||
@@ -421,7 +421,7 @@
|
||||
.empty-box{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
font-size:vw(40);
|
||||
font-size: font-vw(40);
|
||||
height:vh(750);
|
||||
justify-content: center;
|
||||
text-align:center;
|
||||
@@ -461,7 +461,7 @@
|
||||
.video-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(10);
|
||||
padding: vh(34) vw(26);
|
||||
@@ -494,7 +494,7 @@
|
||||
> span {
|
||||
padding-left: vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
line-height: vh(40);
|
||||
}
|
||||
@@ -528,7 +528,6 @@
|
||||
}
|
||||
&-list {
|
||||
// gap: vw(3);
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
@@ -547,14 +546,13 @@
|
||||
// border-radius: 5px; /* 滑块的圆角 */
|
||||
// }
|
||||
// overflow: auto;
|
||||
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
// width: vw(720);
|
||||
// width:48%;
|
||||
// margin-right: 1%;
|
||||
height: vh(275);
|
||||
height: vh(600);
|
||||
padding: vh(10) vw(10);
|
||||
box-sizing: border-box;
|
||||
margin-bottom:vh(6);
|
||||
@@ -596,9 +594,9 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vh(10) vw(10);
|
||||
padding: vh(20) vw(20);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: vw(20);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -606,15 +604,17 @@
|
||||
}
|
||||
&-item__title--error {
|
||||
@extend .video-item__title;
|
||||
font-size: font-vw(22);
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-item__title--primary {
|
||||
@extend .video-item__title;
|
||||
font-size: font-vw(22);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-item__video {
|
||||
width: 100%;
|
||||
height: vh(260);
|
||||
height: vh(580);
|
||||
// height:100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
@@ -638,7 +638,7 @@
|
||||
top: 40 (vh);
|
||||
z-index: 9;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(22);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
display: flex;
|
||||
@@ -713,7 +713,7 @@
|
||||
width: 100%;
|
||||
padding: vw(10);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: vw(20);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -725,6 +725,7 @@
|
||||
}
|
||||
&-title--primary {
|
||||
@extend .item-title;
|
||||
font-size: font-vw(20);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-img {
|
||||
|
||||
@@ -30,16 +30,17 @@
|
||||
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
let center = ['25%', '50%']
|
||||
let center = ['50%', '30%']
|
||||
params = {
|
||||
color: ['#00B1FF', '#00FFFF', '#FF3737', '#DD5627', '#D3F0FE'],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
y: 'center',
|
||||
// right: 0,
|
||||
y: '54%',
|
||||
bottom:20,
|
||||
itemHeight: fitChartSize(8),
|
||||
itemWidth: fitChartSize(8),
|
||||
itemGap: fitChartSize(10),
|
||||
itemGap: fitChartSize(12),
|
||||
formatter: function (name) {
|
||||
let obj = props.list.find((item) => item.name == name)
|
||||
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
|
||||
@@ -72,7 +73,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
data: props.list || []
|
||||
},
|
||||
@@ -90,7 +91,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
data: props.list
|
||||
},
|
||||
@@ -136,7 +137,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.age {
|
||||
width: vw(300);
|
||||
height: vh(150);
|
||||
width: 90%;
|
||||
height: vh(420);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
</div>
|
||||
<div class="pt-20">
|
||||
<Line
|
||||
:width="370"
|
||||
:height="140"
|
||||
width="95%"
|
||||
:height="120"
|
||||
:config="{ legend: false }"
|
||||
:data="scenicQueueList"
|
||||
:xAxisData="scenicQueueXAxisData"
|
||||
@@ -59,8 +59,8 @@
|
||||
<Title3 title="今日景区承载量" />
|
||||
<div class="pt-20">
|
||||
<Line
|
||||
:width="370"
|
||||
:height="140"
|
||||
width="95%"
|
||||
:height="120"
|
||||
:config="{ legend: false }"
|
||||
:data="scenicBearList"
|
||||
:xAxisData="scenicBearXAxisData"
|
||||
@@ -121,12 +121,12 @@
|
||||
|
||||
<div class="box-1">
|
||||
<Title3 title="客源地TOP5" />
|
||||
<RegionTop :list="homeStore.userPortraitData.provinceRate" :width="230" :height="260" />
|
||||
<RegionTop :list="homeStore.userPortraitData.provinceRate" width="100%" :height="150" />
|
||||
</div>
|
||||
|
||||
<div class="box-1">
|
||||
<Title3 title="购票渠道" />
|
||||
<TicketSource :list="homeStore.userPortraitData.channel" :width="230" :height="260" />
|
||||
<TicketSource :list="homeStore.userPortraitData.channel" width="100%" :height="150" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -192,12 +192,12 @@
|
||||
.select-box {
|
||||
width:vw(200);
|
||||
height:vh(30);
|
||||
font-size:vw(16);
|
||||
font-size: font-vw(16);
|
||||
}
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
width: vw(800);
|
||||
height: vh(953);
|
||||
width: vw(1200);
|
||||
// height: vh(953);
|
||||
padding: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
@@ -209,11 +209,11 @@
|
||||
z-index: 990;
|
||||
}
|
||||
.list {
|
||||
height: vh(72);
|
||||
height: vh(104);
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
height: vh(52);
|
||||
height: vh(104);
|
||||
margin: 0 vh(10);
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
@@ -223,35 +223,35 @@
|
||||
&-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
// height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: vw(70);
|
||||
top: vh(-10);
|
||||
left: vw(120);
|
||||
top: vh(-20);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
&-value {
|
||||
position: absolute;
|
||||
left: vw(70);
|
||||
left: vw(120);
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
color: #02f9fa;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.box {
|
||||
width: vw(384);
|
||||
height: vh(320);
|
||||
width: 50%;
|
||||
// height: vh(820);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
@@ -262,7 +262,7 @@
|
||||
display: flex;
|
||||
margin-top: vh(12);
|
||||
width: 100%;
|
||||
height: vh(88);
|
||||
height: vh(150);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
&-item {
|
||||
@@ -274,20 +274,20 @@
|
||||
cursor:pointer;
|
||||
}
|
||||
&-title {
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(18);
|
||||
color: #fff;
|
||||
}
|
||||
&-value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
color: #02f9fa;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
|
||||
}
|
||||
.active{
|
||||
@@ -295,14 +295,14 @@
|
||||
}
|
||||
.prefix,
|
||||
.suffix {
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(12);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.age-box {
|
||||
width: vw(320);
|
||||
height: vh(303);
|
||||
width: vw(400);
|
||||
height: vh(693);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(1) {
|
||||
@@ -310,8 +310,9 @@
|
||||
}
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(230);
|
||||
height: vh(303);
|
||||
width: vw(400);
|
||||
height: 100%;
|
||||
height: vh(693);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&:nth-child(2) {
|
||||
@@ -322,7 +323,7 @@
|
||||
margin: vh(10) vw(20) 0 vw(20);
|
||||
height: vh(24);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -350,7 +351,7 @@
|
||||
}
|
||||
.text {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.progress {
|
||||
@@ -362,13 +363,13 @@
|
||||
}
|
||||
.man {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #02f9fa;
|
||||
margin-left: vw(10);
|
||||
}
|
||||
.woman {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #f15a25;
|
||||
margin-left: vw(10);
|
||||
}
|
||||
@@ -376,7 +377,7 @@
|
||||
.ticket-box {
|
||||
margin-top: vh(20);
|
||||
width: 100%;
|
||||
height: vh(106);
|
||||
// height: vh(106);
|
||||
background: linear-gradient(to right, rgba(0, 77, 136, 0) 0%, rgba(0, 77, 136, 0.6) 100%);
|
||||
.title {
|
||||
width: vw(253);
|
||||
@@ -388,7 +389,7 @@
|
||||
& > span {
|
||||
padding-left: vw(22);
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -398,12 +399,13 @@
|
||||
}
|
||||
}
|
||||
.ticket-wrap {
|
||||
margin-top: vh(8);
|
||||
// margin-top: vh(18);
|
||||
// margin-bottom: vh(18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
& > img {
|
||||
width: vw(74);
|
||||
width: vw(124);
|
||||
height: auto;
|
||||
}
|
||||
& > div {
|
||||
@@ -417,12 +419,12 @@
|
||||
.label {
|
||||
padding-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,9 +49,55 @@
|
||||
<div class="map" id="map" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="left">
|
||||
<div class="flex">
|
||||
<!-- <div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div> -->
|
||||
<div class="flex-1" >
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel" >
|
||||
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="label">接入总数</div>
|
||||
<countup class="value" :end-val="homeStore.hotelData?.info?.hotel_count || 0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">房间总数</div>
|
||||
<countup class="value" :end-val="homeStore.hotelData?.info?.total_room_count || 0" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">当前入住总数</div>
|
||||
<countup
|
||||
class="value success"
|
||||
:end-val="homeStore.hotelData?.info?.total_guest_count || 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">当前入住率</div>
|
||||
<div class="flex align-center">
|
||||
<countup
|
||||
class="value success"
|
||||
:end-val="homeStore.hotelData?.info?.occupancy_rate || 0"
|
||||
/>
|
||||
<span class="suffix">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="occupancy">
|
||||
<Title3 title="酒店入住率" />
|
||||
</div>
|
||||
<occupancy :list="homeStore.hotelData?.list" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="left" v-if="false">
|
||||
<div>
|
||||
<div class="flex justify-center pt-10">
|
||||
<div class="flex justify-center pt-30">
|
||||
<div class="item">
|
||||
<p class="label">今日工单总条数</p>
|
||||
<countup :end-val="homeStore.wordkOrderData.toDayData.count" />
|
||||
@@ -95,7 +141,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="false">
|
||||
<vue3-seamless-scroll
|
||||
class="right"
|
||||
:list="homeStore.wordkOrderList"
|
||||
@@ -126,7 +172,7 @@
|
||||
|
||||
import ScrollNumber from '@/components/ScrollNumber/index.vue'
|
||||
import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
|
||||
|
||||
import occupancy from './occupancy'
|
||||
import icon8 from '@/assets/images/icon-8.png'
|
||||
import icon9 from '@/assets/images/icon-9.png'
|
||||
import icon10 from '@/assets/images/icon-10.png'
|
||||
@@ -358,11 +404,60 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hotel {
|
||||
flex:1;
|
||||
margin: 0 vw(6);
|
||||
.occupancy{
|
||||
height:100%;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
// width: vw(360);
|
||||
height: vh(120);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
}
|
||||
.success {
|
||||
color: #02f9fa;
|
||||
}
|
||||
.suffix {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
color: #02f9fa;
|
||||
color: #02f9fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
padding-top: vh(6);
|
||||
margin-top: vh(6);
|
||||
// width: vw(360);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.workorder-empty{
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: vh(90);
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
}
|
||||
.coll-box{
|
||||
width:initial !important;
|
||||
@@ -380,15 +475,17 @@
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: vh(700);
|
||||
height: vh(1130);
|
||||
background-color: transparent;
|
||||
}
|
||||
.box-3 {
|
||||
width: vw(1614);
|
||||
height: vh(950);
|
||||
// width: vw(1400);
|
||||
// height: vh(2050);
|
||||
height:100%;
|
||||
flex:1;
|
||||
margin-top: vh(120);
|
||||
.header {
|
||||
width: vw(1614);
|
||||
// width: vw(1400);
|
||||
height: vh(128);
|
||||
padding: 0 vw(90);
|
||||
box-sizing: border-box;
|
||||
@@ -417,12 +514,12 @@
|
||||
.label {
|
||||
margin-bottom: vh(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
line-height: vh(33);
|
||||
&--error {
|
||||
@extend .value;
|
||||
@@ -444,7 +541,7 @@
|
||||
margin-right: vw(4);
|
||||
border-radius: vw(4);
|
||||
color: #ffffff;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -462,7 +559,7 @@
|
||||
height: vw(40);
|
||||
margin-right: vw(4);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -496,18 +593,22 @@
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
margin-top: vh(4);
|
||||
display: flex;
|
||||
height: vh(120);
|
||||
margin-top: vh(8);
|
||||
// display: flex;
|
||||
// height: vh(500);
|
||||
height:100%;
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
flex-wrap: wrap;
|
||||
.left {
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
margin-top: vh(4);
|
||||
margin-top: vh(14);
|
||||
width:100%;
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(110);
|
||||
height: vh(180);
|
||||
// height:100%;
|
||||
margin-right: vw(6);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -517,16 +618,17 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding-top:vh(50);
|
||||
}
|
||||
.label {
|
||||
margin-bottom: vh(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
}
|
||||
.error {
|
||||
@@ -543,13 +645,13 @@
|
||||
.text {
|
||||
margin-right: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
.progress {
|
||||
width: vw(100);
|
||||
:deep(.el-progress-bar__outer) {
|
||||
height: vh(4) !important;
|
||||
height: vh(8) !important;
|
||||
background-color: #0858ae !important;
|
||||
}
|
||||
}
|
||||
@@ -568,7 +670,7 @@
|
||||
.value {
|
||||
margin-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
@@ -577,16 +679,17 @@
|
||||
.right {
|
||||
margin-top: vh(4);
|
||||
padding: vh(10) vw(10);
|
||||
height: vh(106);
|
||||
width: vw(1040);
|
||||
// height: vh(106);
|
||||
height:100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: vh(10);
|
||||
&-tag {
|
||||
padding: 0 vw(16);
|
||||
padding:vw(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -608,14 +711,16 @@
|
||||
.content {
|
||||
margin-left: vw(4);
|
||||
padding: 0 vw(10);
|
||||
width: vw(950);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
width: vw(1350);
|
||||
flex:1;
|
||||
padding:vw(15);
|
||||
// height: vh(44);
|
||||
// line-height: vh(44);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
<div class="pt-10">
|
||||
<Title3 title="拥堵路段总数" />
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
width="95%"
|
||||
:height="100"
|
||||
:config="{ legend: false }"
|
||||
:data="congestionData"
|
||||
:xAxisData="congestionXAxisData"
|
||||
@@ -91,8 +91,8 @@
|
||||
<Title3 title="停车场车流量" />
|
||||
<div class="pt-10">
|
||||
<Line
|
||||
:width="250"
|
||||
:height="150"
|
||||
width="95%"
|
||||
:height="100"
|
||||
:config="{ legend: false }"
|
||||
:data="parkData"
|
||||
:xAxisData="parkXAxisData"
|
||||
@@ -125,9 +125,9 @@
|
||||
<div class="flex-1">
|
||||
<Title1 title="车船信息" class="title1" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<!-- <div class="flex-1" >
|
||||
<Title1 title="酒店信息" class="title1" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
@@ -209,7 +209,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hotel">
|
||||
<div class="hotel" v-if="false">
|
||||
<div>
|
||||
<div class="item">
|
||||
<div class="label">接入总数</div>
|
||||
@@ -299,45 +299,47 @@
|
||||
}
|
||||
.box-3 {
|
||||
margin-top: vh(120);
|
||||
width: vw(774);
|
||||
height: vh(956);
|
||||
width: vw(1200);
|
||||
height:100%;
|
||||
// height: vh(2056);
|
||||
padding-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-5.png');
|
||||
background-size: 100% 100%;
|
||||
.traffic-info {
|
||||
height: vh(80);
|
||||
// height: vh(80);
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: vw(64);
|
||||
width: vw(124);
|
||||
height: auto;
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 9px #0096ff;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(18);
|
||||
margin-top: vh(10);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
width: 33%;
|
||||
// height: vh(200);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(250);
|
||||
height: vh(200);
|
||||
// width: vw(300);
|
||||
flex:1;
|
||||
height: vh(450);
|
||||
margin-right: vw(8);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -352,7 +354,7 @@
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: vh(70);
|
||||
height: vh(120);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
@@ -360,13 +362,13 @@
|
||||
background-size: 100% 100%;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
}
|
||||
.error {
|
||||
@@ -384,20 +386,22 @@
|
||||
}
|
||||
}
|
||||
.car-ship {
|
||||
flex: 1;
|
||||
width:100%;
|
||||
// flex: 1;
|
||||
& > div {
|
||||
position: relative;
|
||||
height: vh(114);
|
||||
height: vh(235);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
.car {
|
||||
@extend .icon;
|
||||
width: vw(352);
|
||||
height: vw(70);
|
||||
padding-left: vw(90);
|
||||
margin-left: vw(10);
|
||||
margin-left: vw(30);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -419,12 +423,12 @@
|
||||
.label {
|
||||
margin-bottom: vh(6);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(22);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit {
|
||||
@@ -435,27 +439,31 @@
|
||||
}
|
||||
.table {
|
||||
position: absolute;
|
||||
left: vw(160);
|
||||
width: vw(226);
|
||||
height: vh(96);
|
||||
left: vw(200);
|
||||
// width: vw(350);
|
||||
width:80%;
|
||||
// height: vh(196);
|
||||
height:90%;
|
||||
z-index: 2;
|
||||
background: rgba(0, 150, 255, 0.17);
|
||||
.header {
|
||||
display: flex;
|
||||
height: vh(18);
|
||||
line-height: vh(18);
|
||||
height: vh(48);
|
||||
line-height: vh(48);
|
||||
text-align: center;
|
||||
background: rgba(0, 150, 255, 0.4);
|
||||
& > div {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
// height: vh(50);
|
||||
// line-height: vh(50);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
overflow-y: hidden;
|
||||
height: vh(82);
|
||||
// height: vh(282);
|
||||
// /* 滚动条整体样式 */
|
||||
// &::-webkit-scrollbar {
|
||||
// width: vw(4); /* 滚动条的宽度 */
|
||||
@@ -472,8 +480,9 @@
|
||||
}
|
||||
.cell {
|
||||
display: flex;
|
||||
height: vh(27);
|
||||
line-height: vh(27);
|
||||
// height: vh(50);
|
||||
// line-height: vh(50);
|
||||
padding:vw(10);
|
||||
text-align: center;
|
||||
background: #074686;
|
||||
&:nth-child(odd) {
|
||||
@@ -486,36 +495,38 @@
|
||||
flex: 1;
|
||||
}
|
||||
& > div:nth-child(1) {
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.unit-1 {
|
||||
font-size: vw(12);
|
||||
font-size: vw(18);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hotel {
|
||||
flex:1;
|
||||
margin: 0 vw(6);
|
||||
& > div:nth-child(1) {
|
||||
display: flex;
|
||||
width: vw(360);
|
||||
// width: vw(360);
|
||||
height: vh(70);
|
||||
background-image: url('@/assets/images/bg-4.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -527,13 +538,13 @@
|
||||
justify-content: center;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
.success {
|
||||
@@ -551,7 +562,7 @@
|
||||
& > div:nth-child(2) {
|
||||
padding-top: vh(6);
|
||||
margin-top: vh(6);
|
||||
width: vw(360);
|
||||
// width: vw(360);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@@ -564,7 +575,7 @@
|
||||
}
|
||||
.title1 {
|
||||
:deep(.title) {
|
||||
width: vw(300) !important;
|
||||
// width: vw(300) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gauge {
|
||||
width: vw(120);
|
||||
height: vh(50);
|
||||
width: vw(200);
|
||||
height: vh(80);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -70,14 +70,14 @@
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '4%',
|
||||
top: '0',
|
||||
bottom: '4%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
x: 'center',
|
||||
bottom: '-3%',
|
||||
bottom: '5px',
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemGap: fitChartSize(6),
|
||||
@@ -90,11 +90,11 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(16)
|
||||
},
|
||||
value: {
|
||||
color: '#00D5F6',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(16)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -102,7 +102,7 @@
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '40%'],
|
||||
center: ['50%', '32%'],
|
||||
radius: ['45%', '60%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
@@ -151,7 +151,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:vw(20);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
@@ -159,7 +159,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.jam-count {
|
||||
width: vw(250);
|
||||
height: vh(150);
|
||||
width: vw(350);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 6, 0],
|
||||
inside: true,
|
||||
@@ -152,7 +152,7 @@
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -176,7 +176,7 @@
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontSize: fitChartSize(18),
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
@@ -213,7 +213,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:vw(20);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
@@ -221,7 +221,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.jam {
|
||||
width: vw(250);
|
||||
height: vh(160);
|
||||
width: vw(290);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, 0, 10, 0],
|
||||
inside: true,
|
||||
@@ -135,7 +135,7 @@
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(20)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -159,7 +159,7 @@
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
fontSize: fitChartSize(20),
|
||||
formatter: function (params) {
|
||||
return params.data.name
|
||||
}
|
||||
@@ -191,7 +191,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.occupancy {
|
||||
width: vw(360);
|
||||
height: vh(130);
|
||||
width: 100%;
|
||||
min-height: vh(520);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vacancy {
|
||||
width: vw(250);
|
||||
height: vh(160);
|
||||
width: vw(400);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,14 +60,14 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(18),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
@@ -88,7 +88,7 @@
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 0, 0],
|
||||
@@ -125,6 +125,6 @@
|
||||
<style scoped lang="scss">
|
||||
.vehicle-source {
|
||||
width: 100%;
|
||||
height: vh(160);
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -119,11 +119,11 @@
|
||||
.info {
|
||||
margin-top: vh(120);
|
||||
width: vw(626);
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
&-header {
|
||||
padding: vh(12) vw(12);
|
||||
height: vh(167);
|
||||
height: vh(330);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -137,7 +137,7 @@
|
||||
margin-left: vw(20);
|
||||
> h2 {
|
||||
font-weight: 800;
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(24);
|
||||
color: #ffffff;
|
||||
margin-bottom: vh(12);
|
||||
margin-top: vh(10);
|
||||
@@ -155,13 +155,14 @@
|
||||
}
|
||||
&__text {
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(20);
|
||||
color: #0096ff;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
.statistic {
|
||||
&-box {
|
||||
height: vh(94);
|
||||
height: vh(194);
|
||||
margin: 0 vw(26);
|
||||
gap: vw(20);
|
||||
display: flex;
|
||||
@@ -172,19 +173,19 @@
|
||||
flex: 1;
|
||||
}
|
||||
&-item__label {
|
||||
margin-bottom: vh(16);
|
||||
margin-bottom: vh(26);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
margin-left: vw(4);
|
||||
}
|
||||
}
|
||||
&-item__value {
|
||||
width: vw(100);
|
||||
height: vh(30);
|
||||
width: vw(200);
|
||||
height: vh(60);
|
||||
padding-left: vw(12);
|
||||
padding-bottom: vh(12);
|
||||
display: flex;
|
||||
@@ -193,11 +194,11 @@
|
||||
background-size: 100% 100%;
|
||||
.countup-wrap {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(42);
|
||||
color: #02f9fa;
|
||||
}
|
||||
> span {
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(24);
|
||||
color: #02f9fa;
|
||||
margin-left: vw(4);
|
||||
}
|
||||
@@ -219,11 +220,11 @@
|
||||
margin: vh(20) 0 0 vw(20);
|
||||
padding-right: vw(20);
|
||||
overflow-y: auto;
|
||||
height: vh(200);
|
||||
height: vh(920);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
line-height: vw(26);
|
||||
line-height: 2;
|
||||
text-align: justify;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
@@ -469,7 +469,7 @@
|
||||
display:flex;
|
||||
align-items: center;
|
||||
font-size:vw(40);
|
||||
height:vh(750);
|
||||
// height:vh(750);
|
||||
justify-content: center;
|
||||
text-align:center;
|
||||
width:100%;
|
||||
@@ -497,7 +497,7 @@
|
||||
> span {
|
||||
margin: 0 vw(16);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.pause {
|
||||
@@ -510,7 +510,7 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(10);
|
||||
padding: vh(34) vw(26);
|
||||
@@ -542,7 +542,7 @@
|
||||
> span {
|
||||
padding-left: vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(40);
|
||||
}
|
||||
@@ -571,7 +571,7 @@
|
||||
padding: vh(10) vw(30);
|
||||
position: absolute;
|
||||
right: vw(30);
|
||||
bottom: vh(20);
|
||||
bottom: vh(50);
|
||||
}
|
||||
}
|
||||
&-list {
|
||||
@@ -584,7 +584,7 @@
|
||||
position: relative;
|
||||
// width: vw(720);
|
||||
width:33%;
|
||||
height: vh(380);
|
||||
height: vh(880);
|
||||
padding: vh(10) vw(10);
|
||||
background-image: url('/src/assets/images/item-primary.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -606,7 +606,7 @@
|
||||
text-align: center;
|
||||
line-height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
background-image: url('@/assets/images/unfollow.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -618,15 +618,16 @@
|
||||
|
||||
&-item__inner {
|
||||
position: relative;
|
||||
height:100%;
|
||||
}
|
||||
&-item__title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vh(10) vw(10);
|
||||
padding: vh(20) vw(20);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -634,15 +635,18 @@
|
||||
}
|
||||
&-item__title--error {
|
||||
@extend .video-item__title;
|
||||
font-size:vw(20);
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-item__title--primary {
|
||||
@extend .video-item__title;
|
||||
font-size:font-vw(20);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-item__video {
|
||||
width: 100%;
|
||||
height: vh(366);
|
||||
height:100%;
|
||||
// height: vh(1860);
|
||||
object-fit: fill;
|
||||
}
|
||||
&-detail {
|
||||
@@ -654,7 +658,7 @@
|
||||
position: relative;
|
||||
padding: vh(40) vw(50);
|
||||
width: vw(2060);
|
||||
height: vh(960);
|
||||
height: vh(1960);
|
||||
// background-image: url('/src/assets/images/one-video-bg.png');
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
@@ -665,7 +669,7 @@
|
||||
top: 40 (vh);
|
||||
z-index: 9;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
display: flex;
|
||||
@@ -674,14 +678,14 @@
|
||||
}
|
||||
&-detail__video {
|
||||
width: 100%;
|
||||
height: vh(780);
|
||||
height: vh(1780);
|
||||
object-fit: contain;
|
||||
background-color: #000;
|
||||
}
|
||||
&-right {
|
||||
margin-left: vw(8);
|
||||
width: vw(440);
|
||||
height: vh(890);
|
||||
height: vh(1890);
|
||||
background: #082f5a;
|
||||
.back-box {
|
||||
cursor: pointer;
|
||||
@@ -695,14 +699,14 @@
|
||||
}
|
||||
& > span {
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(870);
|
||||
height: vh(1870);
|
||||
padding: vw(8);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
@@ -738,20 +742,23 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vw(10);
|
||||
padding: vw(20);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 999;
|
||||
}
|
||||
&-title--error {
|
||||
@extend .item-title;
|
||||
// @extend .item-title;
|
||||
font-size:vw(22);
|
||||
background-color: rgba(226, 27, 27, 0.72);
|
||||
}
|
||||
&-title--primary {
|
||||
@extend .item-title;
|
||||
// @extend .item-title;
|
||||
font-size:vw(20);
|
||||
padding:vw(10);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-img {
|
||||
@@ -803,7 +810,7 @@
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -835,7 +842,7 @@
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
text-align: left;
|
||||
@@ -855,15 +862,15 @@
|
||||
}
|
||||
.left-nav {
|
||||
margin: 0 vw(8);
|
||||
width: vw(250);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
width: vw(450);
|
||||
// background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
.bom-box {
|
||||
margin-top: vh(20);
|
||||
margin-top: vh(40);
|
||||
.search-box {
|
||||
border-radius: vw(2);
|
||||
height: vh(36);
|
||||
height: vh(56);
|
||||
border: 1px solid #0096ff;
|
||||
margin: vh(10) auto;
|
||||
margin: vh(20) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -877,7 +884,7 @@
|
||||
|
||||
.tree-box {
|
||||
position: relative;
|
||||
height: vh(750);
|
||||
height: vh(1750);
|
||||
padding: 0 vw(20);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@@ -920,7 +927,7 @@
|
||||
padding: 0 vw(20);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(24);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
@@ -951,7 +958,7 @@
|
||||
cursor: pointer;
|
||||
color: rgb(192,216,254);
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -978,7 +985,7 @@
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(36);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,8 +37,8 @@
|
||||
orient: 'vertical',
|
||||
y: 'center',
|
||||
left: '50%',
|
||||
itemWidth: fitChartSize(12),
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(18),
|
||||
itemHeight: fitChartSize(18),
|
||||
itemGap: fitChartSize(6),
|
||||
formatter: (name) => {
|
||||
let obj = props.dataList.find((item) => item.name == name)
|
||||
@@ -48,11 +48,11 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(20)
|
||||
},
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(20)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -73,13 +73,13 @@
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(16),
|
||||
fontSize: fitChartSize(20),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(22)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.alarmRate {
|
||||
width: vw(380);
|
||||
height: vh(180);
|
||||
width: 100%;
|
||||
height: vh(400);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,17 +41,17 @@
|
||||
<countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-20 gap8">
|
||||
<div class="box">
|
||||
<div class=" pt-20 gap8" style="margin-top:20px;">
|
||||
<div class="box ">
|
||||
<Title3 title="异常告警" />
|
||||
<Line
|
||||
:width="370"
|
||||
:height="180"
|
||||
width="100%"
|
||||
:height="90"
|
||||
:data="abnormalAlarm"
|
||||
:xAxisData="abnormalAlarmXAxisData"
|
||||
/>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box other-box" style="margin-top:20px;">
|
||||
<Title3 title="异常告警占比" />
|
||||
<div class="flex">
|
||||
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
|
||||
@@ -80,12 +80,12 @@
|
||||
<countup class="scenic-item__value" :end-val="trafficAiAnalyzeData.handled" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-20">
|
||||
<div class="flex pt-20" style="margin-top:20px;">
|
||||
<div class="box">
|
||||
<Title3 title="平均车速(KM/H)" />
|
||||
<traffic-jam :width="760"
|
||||
<traffic-jam width="100%"
|
||||
:series="jamlData[0].data"
|
||||
:data="jamXAxisData" :height="180" />
|
||||
:data="jamXAxisData" :height="350" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -105,11 +105,11 @@
|
||||
alt=""
|
||||
/>
|
||||
<img v-if="scenicSpotId == '龙桥河'" class="map-img" src="@/assets/images/lqh.jpg" alt="" /> -->
|
||||
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/bdc.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/sxzd.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<div class="monitor">
|
||||
<div class="t-title">
|
||||
<span>监控点位统计</span>
|
||||
@@ -142,8 +142,8 @@
|
||||
<div class="bg" style="cursor: pointer;" >
|
||||
<Title3 title="今日异常告警" @click="showAbnormalList" />
|
||||
<Line
|
||||
:width="370"
|
||||
:height="180"
|
||||
width="100%"
|
||||
:height="70"
|
||||
:data="abnormalAlarm"
|
||||
:xAxisData="abnormalAlarmXAxisData"
|
||||
/>
|
||||
@@ -180,7 +180,6 @@
|
||||
<Title3 title="异常告警占比" />
|
||||
<div class="flex">
|
||||
<alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -347,7 +346,7 @@
|
||||
.none {
|
||||
width: vw(380);
|
||||
height: vh(200);
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
color: #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -355,7 +354,7 @@
|
||||
}
|
||||
.detection-top {
|
||||
width: 100%;
|
||||
height: vh(560);
|
||||
height: vh(860);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
@@ -381,10 +380,10 @@
|
||||
}
|
||||
}
|
||||
.monitor {
|
||||
width: vw(405);
|
||||
// width: vw(405);
|
||||
margin-right: vw(8);
|
||||
&-statistics {
|
||||
height: vh(90);
|
||||
height: vh(110);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
@@ -398,13 +397,13 @@
|
||||
&-statistics-item {
|
||||
&__label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
}
|
||||
&__value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #ffffff;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
@@ -418,9 +417,9 @@
|
||||
}
|
||||
}
|
||||
.traffic-alarm {
|
||||
width: vw(405);
|
||||
// width: vw(405);
|
||||
&-statistics {
|
||||
height: vh(90);
|
||||
height: vh(110);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
@@ -434,20 +433,20 @@
|
||||
&-statistics-item {
|
||||
&__label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
}
|
||||
&__value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #02f9fa;
|
||||
text-align: center;
|
||||
}
|
||||
&__error {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #ff4400;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -468,11 +467,11 @@
|
||||
}
|
||||
}
|
||||
.t-title {
|
||||
margin: vh(10) auto;
|
||||
margin: vh(25) auto;
|
||||
width: 100%;
|
||||
height: vh(32);
|
||||
height: vh(50);
|
||||
font-weight: 800;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(22);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -486,31 +485,31 @@
|
||||
box-shadow: none;
|
||||
border-top-left-radius: vh(30);
|
||||
border-bottom-left-radius: vh(30);
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #fff;
|
||||
}
|
||||
.box-1 {
|
||||
margin-top: vh(120);
|
||||
width: vw(800);
|
||||
height: vh(950);
|
||||
width: vw(1100);
|
||||
// height: vh(950);
|
||||
padding: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-2.png');
|
||||
background-size: 100% 100%;
|
||||
.traffic {
|
||||
margin-top: vh(20);
|
||||
height: vh(72);
|
||||
height: vh(142);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
|
||||
&-item {
|
||||
width: vw(229);
|
||||
height: vw(72);
|
||||
width: vw(339);
|
||||
height: vw(102);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #fff;
|
||||
padding-left: vw(84);
|
||||
padding-left: vw(150);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -531,22 +530,22 @@
|
||||
&-item__title {
|
||||
margin-bottom: vh(6);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
}
|
||||
&-item__value--primary {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #12b5fd;
|
||||
}
|
||||
&-item__value--success {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
&-item__value--error {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #f15a25;
|
||||
}
|
||||
}
|
||||
@@ -557,13 +556,14 @@
|
||||
gap: vw(20);
|
||||
|
||||
&-item {
|
||||
width: vw(182);
|
||||
height: vw(106);
|
||||
// width: vw(182);
|
||||
flex:1;
|
||||
height: vw(156);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
margin:vh(20) 0;
|
||||
&:nth-child(1) {
|
||||
background-image: url('/src/assets/images/four-t-1.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -604,25 +604,28 @@
|
||||
}
|
||||
&-item__label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #fff;
|
||||
}
|
||||
&-item__value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
margin-top: vh(10);
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
color: #02f9fa;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
|
||||
.other-box{
|
||||
|
||||
height: vh(350) !important;
|
||||
}
|
||||
.box {
|
||||
flex: 1;
|
||||
height: vh(220);
|
||||
height: vh(340);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
@@ -636,7 +639,7 @@
|
||||
// & > span {
|
||||
// padding-left: vw(22);
|
||||
// font-weight: bold;
|
||||
// font-size: vw(15);
|
||||
// font-size: font-vw(15);
|
||||
// background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
// -webkit-background-clip: text;
|
||||
// background-clip: text;
|
||||
@@ -659,36 +662,36 @@
|
||||
justify-content: center;
|
||||
}
|
||||
&-title {
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
&-value {
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #02f9fa;
|
||||
}
|
||||
&-error{
|
||||
margin-top: vh(10);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #ff4400;
|
||||
}
|
||||
.count {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
color: #ff4400 !important;
|
||||
}
|
||||
.prefix,
|
||||
.suffix {
|
||||
color: #ff4400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(12);
|
||||
}
|
||||
}
|
||||
.title-3 {
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
height: vh(16);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -697,7 +700,7 @@
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(18);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@@ -588,6 +588,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.new-title{
|
||||
margin-bottom:vh(20);
|
||||
color:#fff;
|
||||
@@ -621,7 +622,7 @@
|
||||
> span {
|
||||
margin: 0 vw(16);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.pause {
|
||||
@@ -642,34 +643,35 @@
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
color: #fff;
|
||||
font-size: font-vw(22) !important;
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
margin-top: vh(120);
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(36);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
.left-nav {
|
||||
margin: 0 vw(8);
|
||||
width: vw(250);
|
||||
width: vw(400);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
|
||||
.bom-box {
|
||||
margin-top: vh(20);
|
||||
.search-box {
|
||||
border-radius: vw(2);
|
||||
height: vh(36);
|
||||
height: vh(56);
|
||||
border: 1px solid #0096ff;
|
||||
margin: vh(10) auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
.search-icon {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
@@ -679,12 +681,13 @@
|
||||
|
||||
.tree-box {
|
||||
position: relative;
|
||||
height: vh(490);
|
||||
// height: vh(490);
|
||||
padding: 0 vw(20);
|
||||
padding-right:0;
|
||||
padding-bottom:vw(10);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-top:vh(30);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
@@ -701,7 +704,8 @@
|
||||
.tree-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-top: vh(20);
|
||||
padding-top: vh(30);
|
||||
|
||||
// border-left: vw(2) solid #37d8fc;
|
||||
&:nth-child(1) {
|
||||
padding-top: 0;
|
||||
@@ -724,7 +728,7 @@
|
||||
padding: 0 vw(5);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
@@ -755,7 +759,7 @@
|
||||
cursor: pointer;
|
||||
color: rgb(192,216,254);
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(18);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -773,9 +777,9 @@
|
||||
}
|
||||
.ul {
|
||||
font-weight: 400;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(18);
|
||||
color: #fff;
|
||||
height: vh(340);
|
||||
height: vh(740);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* 滚动条整体样式 */
|
||||
@@ -794,13 +798,14 @@
|
||||
}
|
||||
.li {
|
||||
cursor: pointer;
|
||||
width: vw(250);
|
||||
height: vh(58);
|
||||
line-height: vh(58);
|
||||
// width: vw(250);
|
||||
height: vh(98);
|
||||
line-height: vh(98);
|
||||
text-align: center;
|
||||
margin-bottom: vh(15);
|
||||
margin-bottom: vh(25);
|
||||
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
font-size: font-vw(22);
|
||||
}
|
||||
.active {
|
||||
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||
@@ -813,7 +818,7 @@
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(960);
|
||||
// height: vh(960);
|
||||
padding: vh(30) vw(20);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/log-v-bg.png');
|
||||
@@ -822,7 +827,7 @@
|
||||
padding: vh(10) vw(30);
|
||||
position: absolute;
|
||||
right: vw(30);
|
||||
bottom: vh(20);
|
||||
bottom: vh(50);
|
||||
}
|
||||
}
|
||||
&-list {
|
||||
@@ -835,7 +840,7 @@
|
||||
position: relative;
|
||||
// width: vw(686);
|
||||
width: 33%;
|
||||
height: vh(380);
|
||||
height: vh(920);
|
||||
padding: vh(10) vw(10);
|
||||
background-image: url('/src/assets/images/item-primary.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -857,7 +862,7 @@
|
||||
text-align: center;
|
||||
line-height: vh(24);
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
background-image: url('@/assets/images/unfollow.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -875,9 +880,9 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: vh(10) vw(10);
|
||||
padding: vh(20) vw(20);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -889,11 +894,12 @@
|
||||
}
|
||||
&-item__title--primary {
|
||||
@extend .video-item__title;
|
||||
font-size: font-vw(20);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-item__video {
|
||||
width: 100%;
|
||||
height: vh(366);
|
||||
height: vh(900);
|
||||
object-fit: cover;
|
||||
}
|
||||
&-detail {
|
||||
@@ -905,7 +911,7 @@
|
||||
position: relative;
|
||||
padding: vh(40) vw(50);
|
||||
width: vw(1660);
|
||||
height: vh(960);
|
||||
// height: vh(960);
|
||||
background-image: url('/src/assets/images/one-video-bg.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@@ -916,7 +922,7 @@
|
||||
top: 40 (vh);
|
||||
z-index: 9;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
display: flex;
|
||||
@@ -925,14 +931,14 @@
|
||||
}
|
||||
&-detail__video {
|
||||
width: 100%;
|
||||
height: vh(820);
|
||||
height: vh(1820);
|
||||
object-fit: contain;
|
||||
background-color: #000;
|
||||
}
|
||||
&-right {
|
||||
margin-left: vw(8);
|
||||
width: vw(440);
|
||||
height: vh(956);
|
||||
// height: vh(956);
|
||||
background: #082f5a;
|
||||
.back-box {
|
||||
cursor: pointer;
|
||||
@@ -946,14 +952,14 @@
|
||||
}
|
||||
& > span {
|
||||
font-weight: bold;
|
||||
font-size: vw(20);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: vh(920);
|
||||
height: vh(1920);
|
||||
padding: vw(8);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
@@ -991,7 +997,7 @@
|
||||
width: 100%;
|
||||
padding: vw(10);
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1003,6 +1009,8 @@
|
||||
}
|
||||
&-title--primary {
|
||||
@extend .item-title;
|
||||
font-size: font-vw(20);
|
||||
padding:vw(10);
|
||||
background-color: rgba(4, 30, 69, 0.72);
|
||||
}
|
||||
&-img {
|
||||
@@ -1054,7 +1062,7 @@
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -1086,7 +1094,7 @@
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #ffffff;
|
||||
padding: vw(20);
|
||||
text-align: left;
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
data: getXAxisData()
|
||||
@@ -79,7 +79,7 @@
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
@@ -99,7 +99,7 @@
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
formatter: (res) => {
|
||||
let valueMap = {
|
||||
1: '畅通',
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.traffic-jam {
|
||||
width: vw(760);
|
||||
height: vh(180);
|
||||
width:100%;
|
||||
height: vh(360);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,11 +49,11 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
value: {
|
||||
color: '#00D5F6',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -92,7 +92,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
data: getSeriesData()
|
||||
},
|
||||
@@ -109,7 +109,7 @@
|
||||
label: {
|
||||
show: false,
|
||||
color: '#D3F0FE',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
data: getSeriesData()
|
||||
},
|
||||
@@ -152,6 +152,6 @@
|
||||
<style lang="scss" scoped>
|
||||
.age {
|
||||
width: vw(240);
|
||||
height: vh(280);
|
||||
height: vh(800);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
</div>
|
||||
<div class="rt-lable">
|
||||
<div v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
|
||||
<div style="flex:1;" v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<p class="value" :class="{ error: item.type==2,warning: item.type==1 }">{{ item.value }}</p>
|
||||
</div>
|
||||
@@ -25,16 +25,16 @@
|
||||
查看详情
|
||||
<!-- <img src="@/assets/images/d-ico-1.png" /> -->
|
||||
</a>
|
||||
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/bdc.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/sxzd.html"></iframe>
|
||||
<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<div class="item">
|
||||
<circle-progress
|
||||
:width="170"
|
||||
:height="90"
|
||||
:width="150"
|
||||
:height="60"
|
||||
:value="parseFloat(scenicStore.wordkOrderData.toDayData.rate)"
|
||||
:title="`${scenicStore.wordkOrderData.toDayData.rate}%`"
|
||||
subTitle="完成率"
|
||||
@@ -56,8 +56,8 @@
|
||||
</div>
|
||||
<div class="item">
|
||||
<circle-progress
|
||||
:width="170"
|
||||
:height="90"
|
||||
:width="150"
|
||||
:height="60"
|
||||
:value="parseFloat(scenicStore.wordkOrderData.warnData.rate)"
|
||||
:title="`${scenicStore.wordkOrderData.warnData.rate}%`"
|
||||
subTitle="完成率"
|
||||
@@ -224,39 +224,41 @@ import pubSub from 'pubsub-js'
|
||||
flex:1 !important;
|
||||
}
|
||||
.box-1 .rt-lable{
|
||||
justify-content: center !important;
|
||||
text-align: center;
|
||||
.label{
|
||||
font-size:vw(14) !important;
|
||||
font-size: font-vw(20) !important; /* 22×1.2 */
|
||||
}
|
||||
.value{
|
||||
font-size:vw(24) !important;
|
||||
font-size: font-vw(24) !important; /* 32×1.2 */
|
||||
}
|
||||
}
|
||||
.box-1 {
|
||||
margin-top: vh(120);
|
||||
width: vw(780);
|
||||
min-width: vw(900);
|
||||
// flex:1;
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
padding: vw(10);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.header {
|
||||
display: flex;
|
||||
margin-top: vh(10);
|
||||
// display: flex;
|
||||
margin-top: vh(20);
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right:vw(10);
|
||||
cursor:pointer;
|
||||
> img {
|
||||
width: vw(74);
|
||||
width: vw(150);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&__left-item {
|
||||
position: relative;
|
||||
width: vw(115);
|
||||
height: vh(58);
|
||||
width: vw(210);
|
||||
height: vh(120);
|
||||
padding-left: vw(10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -266,9 +268,9 @@ import pubSub from 'pubsub-js'
|
||||
// margin-left:vw(30);
|
||||
.label {
|
||||
position: absolute;
|
||||
top: vh(-4);
|
||||
top: vh(-10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(18);
|
||||
color: #ffffff;
|
||||
left:vw(0)
|
||||
}
|
||||
@@ -279,12 +281,12 @@ import pubSub from 'pubsub-js'
|
||||
justify-content: space-between;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(18); /* 16×1.2 */
|
||||
color: #ffffff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(24); /* 28×1.2 */
|
||||
color: #02f9fa;
|
||||
text-align: center;
|
||||
line-height: vh(60);
|
||||
@@ -299,13 +301,13 @@ import pubSub from 'pubsub-js'
|
||||
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28); /* 36×1.2 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
height: vh(600);
|
||||
height: vh(800);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position:relative;
|
||||
@@ -320,7 +322,7 @@ import pubSub from 'pubsub-js'
|
||||
align-items: center;
|
||||
background: #0a4190;
|
||||
border-radius: vw(4);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(20); /* 22×1.2 */
|
||||
font-weight:700;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
@@ -354,18 +356,18 @@ import pubSub from 'pubsub-js'
|
||||
.footer {
|
||||
.item {
|
||||
flex: 1;
|
||||
height: vh(140);
|
||||
height: vh(280);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
&:nth-child(1) {
|
||||
margin-right: vw(10);
|
||||
// margin-right: vw(10);
|
||||
}
|
||||
.bg {
|
||||
padding-left: vw(20);
|
||||
//width: vw(243);
|
||||
height: vh(40);
|
||||
height: vh(80);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
|
||||
@@ -373,14 +375,14 @@ import pubSub from 'pubsub-js'
|
||||
margin-bottom: vh(4);
|
||||
}
|
||||
.label {
|
||||
width: vw(120);
|
||||
// width: vw(120);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(24); /* 20×1.2 */
|
||||
color: #fff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(38.4); /* 32×1.2 */
|
||||
color: #fff;
|
||||
}
|
||||
.success {
|
||||
@@ -392,8 +394,8 @@ import pubSub from 'pubsub-js'
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-top: vh(4);
|
||||
height: vh(116);
|
||||
margin-top: vh(10);
|
||||
height: vh(400);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cell {
|
||||
@@ -404,14 +406,15 @@ import pubSub from 'pubsub-js'
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tag {
|
||||
padding: 0 vw(16);
|
||||
padding:vw(16);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(18); /* 14×1.2 */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: vw(2);
|
||||
min-width:vw(60);
|
||||
}
|
||||
.tag--important {
|
||||
@extend .tag;
|
||||
@@ -426,16 +429,17 @@ import pubSub from 'pubsub-js'
|
||||
background: #2380fb;
|
||||
}
|
||||
.content {
|
||||
margin-left: vw(4);
|
||||
padding: 0 vw(10);
|
||||
width: vw(760);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
margin-left: vw(10);
|
||||
padding:vw(15);
|
||||
min-width: vw(840);
|
||||
// width:100%;
|
||||
// height: vh(24);
|
||||
// line-height: vh(24);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(18); /* 14×1.2 */
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
@@ -443,8 +447,8 @@ import pubSub from 'pubsub-js'
|
||||
}
|
||||
.more {
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
height: vh(100);
|
||||
width: vw(40);
|
||||
// height: vh(100);
|
||||
margin-top: vh(12);
|
||||
}
|
||||
}
|
||||
@@ -453,7 +457,7 @@ import pubSub from 'pubsub-js'
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__headerbtn .el-dialog__close){
|
||||
color:#fff;
|
||||
font-size:40px;
|
||||
font-size:48px; /* 40×1.2 */
|
||||
position:relative;
|
||||
top:15px;
|
||||
right:15px;
|
||||
@@ -469,6 +473,7 @@ import pubSub from 'pubsub-js'
|
||||
:deep(.el-dialog__title) {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: font-vw(28.8); /* 24×1.2 - 补充默认弹窗标题字体放大 */
|
||||
}
|
||||
|
||||
.sp-ico {
|
||||
@@ -495,7 +500,7 @@ import pubSub from 'pubsub-js'
|
||||
|
||||
}
|
||||
.header-title{
|
||||
font-size:vw(32);
|
||||
font-size: font-vw(38.4); /* 32×1.2 */
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
@@ -513,7 +518,7 @@ import pubSub from 'pubsub-js'
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(28.8); /* 24×1.2 */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
@@ -543,7 +548,7 @@ import pubSub from 'pubsub-js'
|
||||
.item {
|
||||
height: vh(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(28.8); /* 24×1.2 */
|
||||
color: #f1f7ff;
|
||||
display: flex;
|
||||
&:nth-child(2n + 1) {
|
||||
@@ -569,7 +574,7 @@ import pubSub from 'pubsub-js'
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(18); /* 15×1.2 */
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -587,7 +592,7 @@ import pubSub from 'pubsub-js'
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(16.8); /* 14×1.2 */
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
@@ -614,11 +619,11 @@ import pubSub from 'pubsub-js'
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(19.2); /* 16×1.2 */
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -31,8 +31,8 @@
|
||||
<Title3 title="景区排队人数" />
|
||||
</div>
|
||||
<Line
|
||||
:width="490"
|
||||
:height="300"
|
||||
width="100%"
|
||||
:height="440"
|
||||
:data="scenicQueueData"
|
||||
:xAxisData="scenicQueueXAxisData"
|
||||
/>
|
||||
@@ -40,15 +40,16 @@
|
||||
</div>
|
||||
<div class="box mr-8">
|
||||
<Title1 title="景区承载" />
|
||||
<div class="flex">
|
||||
|
||||
<div class="">
|
||||
<circle-progress
|
||||
:width="200"
|
||||
:height="70"
|
||||
:width="170"
|
||||
:height="50"
|
||||
:value="scenicStore.scenicBearData.header.jqRate"
|
||||
:title="`${scenicStore.scenicBearData.header.jqRate}%`"
|
||||
subTitle="景区承载率"
|
||||
/>
|
||||
<div class="flex flex-1 justify-between">
|
||||
<div class="flex flex-1 justify-center" style="text-align: center;">
|
||||
<count-item
|
||||
label="景区当前在园人数"
|
||||
:count="scenicStore.scenicBearData.header.jrjdrs"
|
||||
@@ -62,12 +63,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="border">
|
||||
<div class="pt-10">
|
||||
<div class="pt-50">
|
||||
<Title3 title="今日景区承载量" />
|
||||
</div>
|
||||
<Line
|
||||
:width="490"
|
||||
:height="300"
|
||||
width="100%"
|
||||
:height="390"
|
||||
:data="scenicBearData"
|
||||
:xAxisData="scenicBearXAxisData"
|
||||
/>
|
||||
@@ -75,19 +76,19 @@
|
||||
</div>
|
||||
<div class="box-1 mr-8" style="padding: 0;">
|
||||
<Title1 title="停车信息" />
|
||||
<div class="flex">
|
||||
<div class="height70 flex flex-1">
|
||||
<div class="">
|
||||
<div class=" flex flex-1">
|
||||
<circle-progress
|
||||
v-for="(item, index) in garageList"
|
||||
:key="index"
|
||||
:width="140"
|
||||
:height="70"
|
||||
:width="80"
|
||||
:height="50"
|
||||
:value="parseFloat(item.rate)"
|
||||
:title="item.occupied"
|
||||
:subTitle="`${item.name}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-20 flex flex-1 justify-between">
|
||||
<div class="ml-20 mb-10 flex flex-1 justify-between">
|
||||
<count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
|
||||
<count-item
|
||||
label="剩余车位数"
|
||||
@@ -101,7 +102,7 @@
|
||||
<div class="pt-10">
|
||||
<Title3 title="今日景区车流量" />
|
||||
</div>
|
||||
<Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
|
||||
<Line width="100%" :height="390" :data="carBearData" :xAxisData="carBearXAxisData" />
|
||||
</div>
|
||||
<div class="border flex-1">
|
||||
<div class="pt-10">
|
||||
@@ -111,7 +112,7 @@
|
||||
label="今日停车累计"
|
||||
:dataList="dataLists"
|
||||
:total="carTotal"
|
||||
:width="360"
|
||||
width="100%"
|
||||
:height="300"
|
||||
/>
|
||||
</div>
|
||||
@@ -138,8 +139,8 @@
|
||||
label="告警总数"
|
||||
:dataList="scenicStore.secureData.dataList"
|
||||
:total="alarmTotal"
|
||||
:width="440"
|
||||
:height="300"
|
||||
width="100%"
|
||||
:height="450"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,7 +168,7 @@
|
||||
<Title3 title="拥堵次数占比" />
|
||||
<jam
|
||||
:width="220"
|
||||
:height="300"
|
||||
:height="700"
|
||||
sub-title="拥堵频次总数"
|
||||
:list="scenicStore.trafficData.data.countRate"
|
||||
:text="'暂无拥堵'"
|
||||
@@ -178,7 +179,7 @@
|
||||
<jam
|
||||
:text="'暂无拥堵'"
|
||||
:width="220"
|
||||
:height="300"
|
||||
:height="720"
|
||||
sub-title="拥堵总时长(分钟)"
|
||||
:list="scenicStore.trafficData.data.timeRate"
|
||||
/>
|
||||
@@ -188,7 +189,7 @@
|
||||
|
||||
<div class="box-4 mr-8">
|
||||
<Title1 title="用户画像" />
|
||||
<div class="flex">
|
||||
<div class="flex" style="height: 100%;">
|
||||
<div class="border mr-8 flex-1">
|
||||
<Title3 title="年龄/性别占比" />
|
||||
<age :list="scenicStore.userPortraitData.data.ageRate" />
|
||||
@@ -221,7 +222,7 @@
|
||||
<RegionTop
|
||||
:list="scenicStore.userPortraitData.data.provinceRate"
|
||||
:width="250"
|
||||
:height="366"
|
||||
:height="800"
|
||||
/>
|
||||
</div>
|
||||
<div class="border flex-1">
|
||||
@@ -229,7 +230,7 @@
|
||||
<TicketSource
|
||||
:list="scenicStore.userPortraitData.data.channel"
|
||||
:width="240"
|
||||
:height="330"
|
||||
:height="800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -563,7 +564,7 @@
|
||||
.box-1 {
|
||||
// margin-top: vh(120);
|
||||
width: vw(900);
|
||||
height: vh(950);
|
||||
// height: vh(950);
|
||||
padding: vw(10);
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
@@ -596,7 +597,7 @@
|
||||
position: absolute;
|
||||
top: vh(-4);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #ffffff;
|
||||
left:vw(0)
|
||||
}
|
||||
@@ -607,12 +608,12 @@
|
||||
justify-content: space-between;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(16);
|
||||
font-size: vw(19.2); /* 16×1.2 */
|
||||
color: #ffffff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: vw(33.6); /* 28×1.2 */
|
||||
color: #02f9fa;
|
||||
text-align: center;
|
||||
line-height: vh(60);
|
||||
@@ -627,7 +628,7 @@
|
||||
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: vw(33.6); /* 28×1.2 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -648,7 +649,7 @@
|
||||
align-items: center;
|
||||
background: #0a4190;
|
||||
border-radius: vw(4);
|
||||
font-size: vw(16);
|
||||
font-size: vw(18); /* 16×1.2 */
|
||||
font-weight:700;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
@@ -703,12 +704,12 @@
|
||||
.label {
|
||||
width: vw(120);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #fff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: vw(33.6); /* 28×1.2 */
|
||||
color: #fff;
|
||||
}
|
||||
.success {
|
||||
@@ -734,7 +735,7 @@
|
||||
.tag {
|
||||
padding: 0 vw(16);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -763,7 +764,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
background: rgba(0, 150, 255, 0.28);
|
||||
@@ -781,7 +782,7 @@
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog__headerbtn .el-dialog__close){
|
||||
color:#fff;
|
||||
font-size:40px;
|
||||
font-size:48px; /* 40×1.2 */
|
||||
position:relative;
|
||||
top:15px;
|
||||
right:15px;
|
||||
@@ -797,6 +798,7 @@
|
||||
:deep(.el-dialog__title) {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: vw(38.4); /* 32×1.2 */
|
||||
}
|
||||
|
||||
.sp-ico {
|
||||
@@ -823,7 +825,7 @@
|
||||
|
||||
}
|
||||
.header-title{
|
||||
font-size:vw(32);
|
||||
font-size:vw(38.4); /* 32×1.2 */
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
@@ -841,7 +843,7 @@
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: vw(28.8); /* 24×1.2 */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
@@ -871,7 +873,7 @@
|
||||
.item {
|
||||
height: vh(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: vw(28.8); /* 24×1.2 */
|
||||
color: #f1f7ff;
|
||||
display: flex;
|
||||
&:nth-child(2n + 1) {
|
||||
@@ -897,7 +899,7 @@
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
font-size: vw(18); /* 15×1.2 */
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -915,7 +917,7 @@
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
@@ -942,7 +944,7 @@
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-size: vw(19.2); /* 16×1.2 */
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
@@ -958,7 +960,7 @@
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: vw(20);
|
||||
font-size: vw(24); /* 20×1.2 */
|
||||
justify-content: center;
|
||||
}
|
||||
.look-box {
|
||||
@@ -974,7 +976,7 @@
|
||||
align-items: center;
|
||||
background: #0a4190;
|
||||
border-radius: vw(4);
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -1042,12 +1044,12 @@
|
||||
}
|
||||
&-item-label {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: vw(14.4); /* 12×1.2 */
|
||||
line-height: vh(14);
|
||||
}
|
||||
&-item-value {
|
||||
font-weight: bold;
|
||||
font-size: vw(16);
|
||||
font-size: vw(19.2); /* 16×1.2 */
|
||||
line-height: vh(18);
|
||||
}
|
||||
}
|
||||
@@ -1055,7 +1057,7 @@
|
||||
margin: vh(120) 0 0 vw(10);
|
||||
.count-box {
|
||||
padding: 0 vw(10);
|
||||
height: vh(70);
|
||||
height: vh(140);
|
||||
}
|
||||
.bg {
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
@@ -1070,39 +1072,39 @@
|
||||
}
|
||||
.box {
|
||||
@extend .bg;
|
||||
width: vw(510);
|
||||
height: vh(475);
|
||||
width: vw(650);
|
||||
// height: vh(475);
|
||||
}
|
||||
.box-1 {
|
||||
@extend .bg;
|
||||
height: vh(475);
|
||||
// height: vh(475);
|
||||
}
|
||||
.box-2 {
|
||||
@extend .bg;
|
||||
height: vh(475);
|
||||
// height: vh(475);
|
||||
}
|
||||
.box-3 {
|
||||
@extend .bg;
|
||||
height: vh(465);
|
||||
// height: vh(465);
|
||||
}
|
||||
.box-4 {
|
||||
@extend .bg;
|
||||
height: vh(465);
|
||||
// height: vh(465);
|
||||
}
|
||||
.box-5 {
|
||||
@extend .bg;
|
||||
height: vh(465);
|
||||
// height: vh(465);
|
||||
flex:1;
|
||||
}
|
||||
.car-box {
|
||||
width: vw(316);
|
||||
height: vh(74);
|
||||
// width: vw(316);
|
||||
height: vh(120);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
position: absolute;
|
||||
width: vw(350);
|
||||
height: vw(74);
|
||||
// width: vw(350);
|
||||
height: vw(100);
|
||||
}
|
||||
.car-item {
|
||||
flex: 1;
|
||||
@@ -1115,25 +1117,25 @@
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(24); /* 20×1.2 */
|
||||
color: #fff;
|
||||
}
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: vw(33.6); /* 28×1.2 */
|
||||
color: #02f9fa;
|
||||
margin-top: vh(6);
|
||||
margin-top: vh(10);
|
||||
align-items: flex-end;
|
||||
}
|
||||
.suffix {
|
||||
font-size: vw(12);
|
||||
font-size: vw(14.4); /* 12×1.2 */
|
||||
color: #02f9fa;
|
||||
margin-bottom: vw(4);
|
||||
}
|
||||
}
|
||||
.sum {
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
font-size: vw(26.4); /* 22×1.2 */
|
||||
color: #02f9fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1141,7 +1143,7 @@
|
||||
.car-ship {
|
||||
// width: vw(660);
|
||||
width: 100%;
|
||||
height: vh(250);
|
||||
height: vh(750);
|
||||
}
|
||||
.full {
|
||||
cursor: pointer;
|
||||
@@ -1155,7 +1157,7 @@
|
||||
margin: vw(20) vw(20) 0 vw(20);
|
||||
height: vh(24);
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1183,7 +1185,7 @@
|
||||
}
|
||||
.text {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.progress {
|
||||
@@ -1192,13 +1194,13 @@
|
||||
}
|
||||
.man {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #02f9fa;
|
||||
margin-left: vw(10);
|
||||
}
|
||||
.woman {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: #f15a25;
|
||||
margin-left: vw(10);
|
||||
}
|
||||
@@ -1218,7 +1220,7 @@
|
||||
& > span {
|
||||
padding-left: vw(22);
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: vw(18); /* 15×1.2 */
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -1246,14 +1248,14 @@
|
||||
.label {
|
||||
padding-left: vw(10);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: vw(16.8); /* 14×1.2 */
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.countup-wrap {
|
||||
color: #02f9fa;
|
||||
font-size: vw(28);
|
||||
font-size: vw(33.6); /* 28×1.2 */
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -104,11 +104,11 @@
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(18)
|
||||
},
|
||||
value: {
|
||||
color: '#00D5F6',
|
||||
fontSize: fitChartSize(14)
|
||||
fontSize: fitChartSize(18)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -136,7 +136,7 @@
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(14)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -163,7 +163,7 @@
|
||||
top:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size:vw(18);
|
||||
font-size:vw(22);
|
||||
// color:#999;
|
||||
color:#02f9fa;
|
||||
display: flex;
|
||||
|
||||
@@ -77,14 +77,14 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(14),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(14),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
@@ -99,12 +99,12 @@
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
barWidth: fitChartSize(16),
|
||||
barWidth: fitChartSize(18),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
fontSize: fitChartSize(14)
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
@@ -158,6 +158,6 @@
|
||||
}
|
||||
.traffic-flow {
|
||||
width: vw(260);
|
||||
height: vh(300);
|
||||
height: vh(800);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
right: vw(10);
|
||||
}
|
||||
.area {
|
||||
width: vw(840);
|
||||
height: vh(400);
|
||||
width: 100%;
|
||||
height:80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,9 +53,9 @@
|
||||
.header {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
font-size: font-vw(24);
|
||||
color: #0084ff;
|
||||
height: vh(40);
|
||||
height: vh(80);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(3, 78, 153, 0.3);
|
||||
@@ -66,7 +66,7 @@
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
height: vh(370);
|
||||
height: vh(800);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
@@ -85,7 +85,7 @@
|
||||
// background: #555; /* 滑块的背景色 */
|
||||
// }
|
||||
.cell {
|
||||
height: vh(40);
|
||||
height: vh(80);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:nth-child(2n) {
|
||||
@@ -99,10 +99,11 @@
|
||||
}
|
||||
.index {
|
||||
display: inline-block;
|
||||
width: vw(40);
|
||||
height: vh(24);
|
||||
// width: vw(50);
|
||||
// height: vh(30);
|
||||
padding:vw(15);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -124,17 +125,18 @@
|
||||
}
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
}
|
||||
.number {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.status {
|
||||
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
color: #e21b1b;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wordCloud {
|
||||
width: vw(760);
|
||||
height: vh(410);
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-2 mr-8" :class="homeStore.amplify?'':'coll-box'">
|
||||
<div class="box-2 mr-8" style="flex:1;" :class="homeStore.amplify?'':'coll-box'">
|
||||
<div class="flex justify-center">
|
||||
<div class="top flex justify-evenly">
|
||||
<count-item label="今日舆情总数" :count="total" suffix="条" color="#ffffff" />
|
||||
@@ -31,7 +31,7 @@
|
||||
<div class="flex mt-20 gap-8 ml-8 mr-8">
|
||||
<div v-for="(item, index) in stateList" :key="index" class="border flex-1">
|
||||
<Title3 :title="item.name" />
|
||||
<pie-row :width="490" :height="330" :dataList="item.data" :total="item.total" />
|
||||
<pie-row :width="150" :height="200" :dataList="item.data" :total="item.total" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-8">
|
||||
<div class="box-2 mr-8 rela" :class="homeStore.amplify?'':'coll-box'">
|
||||
<div class="box-2 mr-8 rela" style="width: 33%;" :class="homeStore.amplify?'':'coll-box'">
|
||||
<Title1 title="舆情指数" />
|
||||
<div class="select-box">
|
||||
<Select
|
||||
@@ -53,8 +53,8 @@
|
||||
</div>
|
||||
<div class="coll-box-3">
|
||||
<Line
|
||||
:width="1500"
|
||||
:height="400"
|
||||
width="100%"
|
||||
:height="220"
|
||||
:data="seriesData"
|
||||
:xAxisData="xAxisData"
|
||||
:seriesConfig="{ smooth: false, symbol: 'circle' }"
|
||||
@@ -62,11 +62,11 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="box-4 mr-8 rela">
|
||||
<div class="box-4 mr-8 rela" style="width: 33%;" >
|
||||
<Title1 title="地域分析" />
|
||||
<Area />
|
||||
<Area width="100%" />
|
||||
</div>
|
||||
<div class="box-3">
|
||||
<div class="box-3" style="width: 33%;" >
|
||||
<Title1 title="词频分析" />
|
||||
<word-cloud />
|
||||
</div>
|
||||
@@ -249,7 +249,7 @@
|
||||
.link {
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
// font-size:vw(14);
|
||||
// font-size: font-vw(14);
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -332,7 +332,7 @@
|
||||
|
||||
}
|
||||
.header-title{
|
||||
font-size:vw(32);
|
||||
font-size: font-vw(32);
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
font-weight:bold;
|
||||
@@ -350,7 +350,7 @@
|
||||
.header {
|
||||
height: vh(28);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
|
||||
@@ -363,8 +363,9 @@
|
||||
}
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
height: vh(490);
|
||||
height: vh(520);
|
||||
/* 滚动条整体样式 */
|
||||
// height:100%;
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
}
|
||||
@@ -380,7 +381,7 @@
|
||||
.item {
|
||||
height: vh(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(20);
|
||||
color: #f1f7ff;
|
||||
display: flex;
|
||||
&:nth-child(2n + 1) {
|
||||
@@ -406,7 +407,7 @@
|
||||
span {
|
||||
margin-left: vw(30);
|
||||
font-weight: 800;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
line-height: vh(26);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -424,7 +425,7 @@
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(24);
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
@@ -451,7 +452,7 @@
|
||||
text-align: center;
|
||||
line-height: vh(26);
|
||||
margin-left: vw(32.5);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background-image: url('@/assets/images/title-1.png');
|
||||
@@ -477,33 +478,35 @@
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
}
|
||||
.top {
|
||||
width: vw(600);
|
||||
height: vh(50);
|
||||
width: vw(800);
|
||||
height: vh(150);
|
||||
margin-top: vh(35);
|
||||
font-size: font-vw(22);
|
||||
}
|
||||
.box-1 {
|
||||
width: vw(790);
|
||||
height: vh(470);
|
||||
width: vw(1000);
|
||||
// height: vh(470);
|
||||
@extend .bg;
|
||||
}
|
||||
.box-2 {
|
||||
width: vw(1514);
|
||||
height: vh(470);
|
||||
// width: vw(1720);
|
||||
// min-width: vw(1440);
|
||||
// height: vh(470);
|
||||
@extend .bg;
|
||||
}
|
||||
.box-3 {
|
||||
width: vw(810);
|
||||
height: vh(470);
|
||||
// height: vh(470);
|
||||
@extend .bg;
|
||||
}
|
||||
.box-4{
|
||||
width: vw(850);
|
||||
height: vh(470);
|
||||
// height: vh(470);
|
||||
@extend .bg;
|
||||
}
|
||||
.box-5{
|
||||
width: vw(870);
|
||||
height: vh(470);
|
||||
width: vw(1200);
|
||||
// height: vh(470);
|
||||
@extend .bg;
|
||||
}
|
||||
.border {
|
||||
@@ -513,7 +516,7 @@
|
||||
.list {
|
||||
margin: 0 vw(20);
|
||||
overflow-y: auto;
|
||||
height: vh(400);
|
||||
height: vh(850);
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(4); /* 滚动条的宽度 */
|
||||
@@ -530,20 +533,21 @@
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: vh(40);
|
||||
height: vh(90);
|
||||
&:nth-child(2n + 1) {
|
||||
background: rgba(3, 78, 153, 0.3);
|
||||
}
|
||||
.status {
|
||||
width: vw(40);
|
||||
height: vh(20);
|
||||
line-height: vh(20);
|
||||
// width: vw(60);
|
||||
// height: vh(40);
|
||||
line-height: vh(40);
|
||||
text-align: center;
|
||||
margin: 0 vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
border-radius: vw(2);
|
||||
padding:vw(15);
|
||||
&-error {
|
||||
@extend .status;
|
||||
background: #d9011b;
|
||||
@@ -561,16 +565,17 @@
|
||||
.content {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
white-space: nowrap; /* 保证文本在一行内显示 */
|
||||
overflow: hidden; /* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
|
||||
margin-top:0;
|
||||
}
|
||||
.date {
|
||||
margin: 0 vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,8 +32,9 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-item">
|
||||
<div class="chart-item" >
|
||||
<Title3 title="拥堵频次占比" />
|
||||
|
||||
<div class="chart__inner">
|
||||
<div>
|
||||
<spotRate
|
||||
@@ -41,8 +42,9 @@
|
||||
:total="chartData.totalNum"
|
||||
label="拥堵频次总数"
|
||||
/>
|
||||
<ul class="chart__legend">
|
||||
<ul class="chart__legend flex" style="flex-wrap: wrap;">
|
||||
<li
|
||||
|
||||
class="chart__legend-item"
|
||||
v-for="(item, index) in chartData.roadNum"
|
||||
:key="index"
|
||||
@@ -65,6 +67,7 @@
|
||||
<div class="new-ul">
|
||||
<ul class="chart__legend">
|
||||
<li
|
||||
|
||||
class="chart__legend-item"
|
||||
v-for="(item, index) in chartData.typeNum"
|
||||
:key="index"
|
||||
@@ -88,8 +91,9 @@
|
||||
:total="chartData.totalTime"
|
||||
label="拥堵总时长"
|
||||
/>
|
||||
<ul class="chart__legend">
|
||||
<ul class="chart__legend flex" style="flex-wrap: wrap;">
|
||||
<li
|
||||
|
||||
class="chart__legend-item"
|
||||
v-for="(item, index) in chartData.roadTime"
|
||||
:key="index"
|
||||
@@ -116,6 +120,7 @@
|
||||
<div class="new-ul">
|
||||
<ul class="chart__legend">
|
||||
<li
|
||||
|
||||
class="chart__legend-item"
|
||||
v-for="(item, index) in chartData.typeTime"
|
||||
:key="index"
|
||||
@@ -179,45 +184,62 @@
|
||||
<style lang="scss" scoped>
|
||||
.new-vehicle{
|
||||
padding-top:vh(20);
|
||||
width:100%;
|
||||
}
|
||||
.new-ul{
|
||||
padding:0 vw(30);
|
||||
padding:0 0;
|
||||
margin-top:vh(20);
|
||||
}
|
||||
.box-1 {
|
||||
margin-top: vh(120);
|
||||
width: vw(626);
|
||||
height: vh(950);
|
||||
width: vw(800);
|
||||
// height: vh(950);
|
||||
// height: 100%;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: vw(8);
|
||||
gap: vw(4);
|
||||
padding: 0 vw(8);
|
||||
|
||||
height:100%;
|
||||
overflow: auto;
|
||||
padding-bottom: vh(150);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
&-item {
|
||||
width: vw(300);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
width:100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
// top:vh(-10);
|
||||
// height:20%;
|
||||
overflow: hidden;
|
||||
// width: vw(300);
|
||||
// background-image: url('@/assets/images/bg-3.png');
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
width:100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: vh(380);
|
||||
// height: vh(380);
|
||||
|
||||
}
|
||||
|
||||
&__legend {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(30);
|
||||
height: vh(50);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(8);
|
||||
margin-bottom: vh(15);
|
||||
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
|
||||
|
||||
&::before {
|
||||
@@ -236,15 +258,15 @@
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
width: vw(110);
|
||||
// width: vw(110);
|
||||
}
|
||||
|
||||
.value {
|
||||
// padding-right: vw(20);
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
@@ -261,7 +283,7 @@
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
margin-bottom: vh(20);
|
||||
@@ -277,7 +299,7 @@
|
||||
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #02f9fa;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
@@ -234,6 +234,7 @@
|
||||
.flex-1{
|
||||
flex:1;
|
||||
overflow:hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.title-1 {
|
||||
position: relative;
|
||||
@@ -241,7 +242,7 @@
|
||||
.title {
|
||||
margin: vh(10) auto;
|
||||
margin-top:0;
|
||||
width: vw(1500);
|
||||
width: vw(1100);
|
||||
height: vh(32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -250,7 +251,7 @@
|
||||
background-size: 100% 100%;
|
||||
& > span {
|
||||
font-weight: 800;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
@@ -265,8 +266,9 @@
|
||||
flex:1;
|
||||
}
|
||||
.nav {
|
||||
width: vw(230);
|
||||
height: vh(950);
|
||||
width: vw(330);
|
||||
// height: vh(950);
|
||||
height:100%;
|
||||
margin-left: vw(8);
|
||||
padding-left: vw(5);
|
||||
overflow: auto;
|
||||
@@ -279,10 +281,10 @@
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
margin-bottom: vw(15);
|
||||
width: vw(220);
|
||||
height: vh(54);
|
||||
width: 100%;
|
||||
height: vh(100);
|
||||
font-weight: bold;
|
||||
font-size: vw(18);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -302,6 +304,7 @@
|
||||
// width: vw(2116);
|
||||
width:100%;
|
||||
height: vh(890);
|
||||
height: 100%;
|
||||
margin-left: vw(8);
|
||||
box-sizing: border-box;
|
||||
background-image: url('/src/assets/images/map-bg-2.png');
|
||||
@@ -334,7 +337,7 @@
|
||||
height: vh(60);
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(12);
|
||||
color: #ffffff;
|
||||
line-height: vh(14);
|
||||
text-align: left;
|
||||
@@ -343,8 +346,8 @@
|
||||
}
|
||||
}
|
||||
.list {
|
||||
width: vw(806);
|
||||
height: vh(952);
|
||||
width: vw(1000);
|
||||
height: 100%;
|
||||
margin-left: vw(8);
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
@@ -371,7 +374,7 @@
|
||||
}
|
||||
&-left__title {
|
||||
margin-right: vw(20);
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
@@ -384,7 +387,7 @@
|
||||
width: vw(120);
|
||||
height: vw(72);
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
color: #ffffff;
|
||||
padding-left: vw(42);
|
||||
display: flex;
|
||||
@@ -399,7 +402,7 @@
|
||||
width: vw(120);
|
||||
height: vw(72);
|
||||
font-weight: 600;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
color: #ffffff;
|
||||
padding-left: vw(42);
|
||||
display: flex;
|
||||
@@ -409,9 +412,9 @@
|
||||
}
|
||||
&-status {
|
||||
min-width: vw(150);
|
||||
height: vw(54);
|
||||
height: vw(64);
|
||||
font-weight: 600;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -425,7 +428,7 @@
|
||||
.chart-item {
|
||||
padding: vw(1);
|
||||
margin-top: vh(10);
|
||||
height: vh(293);
|
||||
height: vh(500);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
@@ -447,7 +450,7 @@
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
@@ -461,7 +464,7 @@
|
||||
}
|
||||
|
||||
.statistics {
|
||||
height: vh(90);
|
||||
height: vh(190);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
@@ -470,15 +473,15 @@
|
||||
|
||||
&-item__label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
color: #fff;
|
||||
margin-bottom: vh(10);
|
||||
margin-bottom: vh(30);
|
||||
}
|
||||
&-item__value {
|
||||
padding-left: vw(15);
|
||||
height: vh(30);
|
||||
height: vh(90);
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(28);
|
||||
color: #02f9fa;
|
||||
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -487,7 +490,7 @@
|
||||
.item-t {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(14);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: vh(20);
|
||||
img {
|
||||
@@ -503,7 +506,7 @@
|
||||
background-image: url('@/assets/images/t-box-title-bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
font-weight: bold;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #02f9fa;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
@@ -59,13 +59,13 @@
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(20),
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(16)
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -124,7 +124,8 @@
|
||||
justify-content: center;
|
||||
}
|
||||
.spotRate {
|
||||
width: vw(200);
|
||||
height: vh(200);
|
||||
width: vw(340);
|
||||
height: vh(340);
|
||||
margin:0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
data: getXAxisData()
|
||||
@@ -70,7 +70,7 @@
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
@@ -90,7 +90,7 @@
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
formatter: (res) => {
|
||||
let valueMap = {
|
||||
1: '畅通',
|
||||
@@ -125,7 +125,8 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.traffic-jam {
|
||||
width: vw(800);
|
||||
height: vh(250);
|
||||
width: 100%;
|
||||
height: vh(430);
|
||||
margin-top:vh(30);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -60,14 +60,14 @@
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontSize: fitChartSize(20),
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
},
|
||||
splitLine: {
|
||||
@@ -88,7 +88,7 @@
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(10)
|
||||
fontSize: fitChartSize(20)
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 0, 0],
|
||||
@@ -124,7 +124,7 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vehicle-source {
|
||||
width:vw(310);
|
||||
height: vh(160);
|
||||
width:100%;
|
||||
height: vh(350);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
clearable
|
||||
placeholder="车牌号"
|
||||
@input="onInput"
|
||||
style="height:50px;margin:10px 0;"
|
||||
>
|
||||
</el-input>
|
||||
<ul class="tabs">
|
||||
@@ -504,7 +505,7 @@ import PubSub from 'pubsub-js'
|
||||
.item {
|
||||
height: vh(50);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #f1f7ff;
|
||||
display: flex;
|
||||
&:nth-child(2n + 1) {
|
||||
@@ -542,12 +543,12 @@ import PubSub from 'pubsub-js'
|
||||
justify-content: center;
|
||||
.t-item{
|
||||
// margin:0 vw(10);
|
||||
font-size:vw(18);
|
||||
font-size: font-vw(24);
|
||||
color:#fff;
|
||||
padding:vh(5) 0;
|
||||
padding:vh(30) 0;
|
||||
background: url('@/assets/images/title-2.png') no-repeat center 100%;
|
||||
background-size:100% 100%;
|
||||
padding:vw(10) vw(35);
|
||||
padding:vw(30) vw(50);
|
||||
}
|
||||
.tabs-active{
|
||||
// color:#409eff;
|
||||
@@ -616,7 +617,7 @@ import PubSub from 'pubsub-js'
|
||||
height: vh(36);
|
||||
padding-left: vw(16);
|
||||
font-weight: 600;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -624,20 +625,20 @@ import PubSub from 'pubsub-js'
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-header {
|
||||
padding: vh(12) vw(14);
|
||||
padding: vh(12) vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-sim {
|
||||
font-weight: 600;
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
color: #ffffff;
|
||||
}
|
||||
&-tag {
|
||||
padding: vh(5) vw(8);
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
font-size: font-vw(13);
|
||||
color: #0096ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -669,7 +670,7 @@ import PubSub from 'pubsub-js'
|
||||
> p {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(24);
|
||||
color: #ffffff;
|
||||
line-height: vh(20);
|
||||
}
|
||||
@@ -678,12 +679,13 @@ import PubSub from 'pubsub-js'
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(32);
|
||||
height: vh(42);
|
||||
color: #fff;
|
||||
font-size: font-vw(22);
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
margin-top: vh(8);
|
||||
font-size: vw(16);
|
||||
font-size: font-vw(16);
|
||||
border-radius: vw(2);
|
||||
border: vw(1) solid #0096ff;
|
||||
box-shadow: none !important;
|
||||
@@ -696,9 +698,9 @@ import PubSub from 'pubsub-js'
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: vh(44);
|
||||
height: vh(88);
|
||||
font-weight: 600;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -725,11 +727,12 @@ import PubSub from 'pubsub-js'
|
||||
|
||||
.dialog {
|
||||
width: vw(3170);
|
||||
width:100%;
|
||||
padding: vw(8);
|
||||
background-image: url('@/assets/images/dialog-bg.png') !important;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
height:vh(930);
|
||||
// height:vh(930);
|
||||
margin-top:vh(130);
|
||||
:deep(.el-dialog) {
|
||||
width: vw(3170);
|
||||
@@ -742,14 +745,15 @@ import PubSub from 'pubsub-js'
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
margin-right: vw(10);
|
||||
margin-right: vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
width:vw(1200);
|
||||
}
|
||||
.list {
|
||||
// width: vw(400);
|
||||
height: vh(790);
|
||||
padding-top: vh(10);
|
||||
height: vh(1820);
|
||||
padding-top: vh(20);
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
@@ -775,8 +779,8 @@ import PubSub from 'pubsub-js'
|
||||
.item {
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
height: vh(30);
|
||||
font-size: font-vw(22);
|
||||
height: vh(90);
|
||||
padding: 0 vw(20);
|
||||
color: #0096ff;
|
||||
display: flex;
|
||||
@@ -816,7 +820,7 @@ import PubSub from 'pubsub-js'
|
||||
}
|
||||
.big-car-ship {
|
||||
flex: 1;
|
||||
height: vh(910);
|
||||
height: vh(2010);
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.work-box-1 {
|
||||
width: vw(815);
|
||||
height: vh(950);
|
||||
width: vw(1000);
|
||||
height:100%;
|
||||
margin-top: vh(120);
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
@@ -49,6 +49,7 @@
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
height: vh(895);
|
||||
height:100%;
|
||||
overflow: auto;
|
||||
.li:nth-child(odd) {
|
||||
background: rgba(3, 78, 153, 0.3);
|
||||
@@ -62,15 +63,16 @@
|
||||
justify-content: flex-start;
|
||||
padding: vh(8) vh(10);
|
||||
.label {
|
||||
width: vw(60);
|
||||
height: vh(24);
|
||||
// width: vw(60);
|
||||
// height: vh(24);
|
||||
line-height: vh(24);
|
||||
color: #fff;
|
||||
border-radius: vw(2);
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right: vw(10);
|
||||
padding:vw(15);
|
||||
}
|
||||
.normal {
|
||||
@extend .label;
|
||||
@@ -86,9 +88,9 @@
|
||||
}
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(20);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 14px;
|
||||
// line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
@@ -96,7 +98,7 @@
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<Title1 title="今日工单" />
|
||||
</div>
|
||||
<div class="hd-list">
|
||||
<img class="h-icon" src="@/assets/images/work-icon-1.png" />
|
||||
<!-- <img class="h-icon" src="@/assets/images/work-icon-1.png" /> -->
|
||||
<div class="item item1">
|
||||
今日工单总条数 <span class="color1"><countup :end-val="totalData.total" /></span>
|
||||
</div>
|
||||
@@ -23,9 +23,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart__wrapper mr-8">
|
||||
<div class="chart__wrapper">
|
||||
<Title3 title="工单总数" />
|
||||
<Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" />
|
||||
<div style="margin-top:10px;"></div>
|
||||
<Line width="100%" :height="90" :data="seriesData" :xAxisData="xAxisData" />
|
||||
</div>
|
||||
<div class="chart__wrapper">
|
||||
<Title3 title="工单类型完成比例" />
|
||||
@@ -67,7 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-2 mt-8">
|
||||
<div class="box-2">
|
||||
<Title1 title="不同景区工单占比" />
|
||||
<div class="chart">
|
||||
<div class="chart__wrapper">
|
||||
@@ -195,7 +196,7 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
:deep(.el-progress__text) {
|
||||
font-size: vw(14) !important;
|
||||
font-size: font-vw(20) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -213,7 +214,7 @@
|
||||
margin-left: vw(5);
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
font-size: font-vw(20);
|
||||
color: #0084ff;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
@@ -230,25 +231,25 @@
|
||||
.work-box-2 {
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(8);
|
||||
|
||||
flex:1;
|
||||
.box-1 {
|
||||
padding: vw(1) 0;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to bottom, #0b2f64 0%, #062b57 100%);
|
||||
.chart {
|
||||
display: flex;
|
||||
// display: flex;
|
||||
justify-content: space-between;
|
||||
padding: vw(20) vw(15);
|
||||
|
||||
&__wrapper {
|
||||
width: vw(740);
|
||||
height: vh(370);
|
||||
// width: vw(740);
|
||||
height: vh(400);
|
||||
padding: 0 vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
.progress {
|
||||
padding: vw(30);
|
||||
padding-top: vh(40);
|
||||
padding-top: vh(50);
|
||||
&-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@@ -257,7 +258,7 @@
|
||||
}
|
||||
&-item__label {
|
||||
font-weight: bold;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
@@ -279,27 +280,27 @@
|
||||
left: vw(70);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: vw(74);
|
||||
width: vw(94);
|
||||
height: auto;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
width: vw(210);
|
||||
height: vh(58);
|
||||
line-height: vh(58);
|
||||
width: vw(250);
|
||||
height: vh(78);
|
||||
line-height: vh(78);
|
||||
padding-left: vw(10);
|
||||
text-align: center;
|
||||
margin: 0 vw(15);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(22);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
span {
|
||||
font-size: vw(24);
|
||||
font-size: font-vw(28);
|
||||
position: relative;
|
||||
top: vh(2);
|
||||
top: vh(0);
|
||||
margin-left: vw(5);
|
||||
}
|
||||
.color1 {
|
||||
@@ -321,19 +322,19 @@
|
||||
}
|
||||
}
|
||||
.box-2 {
|
||||
padding: vw(1);
|
||||
height: vh(442);
|
||||
// padding: vw(1);
|
||||
// height: vh(442);
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
// display: flex;
|
||||
justify-content: space-between;
|
||||
padding: vw(20) vw(15);
|
||||
|
||||
&__wrapper {
|
||||
width: vw(740);
|
||||
height: vh(370);
|
||||
// width: vw(740);
|
||||
// height: vh(370);
|
||||
padding: 0 vw(20);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
@@ -349,8 +350,8 @@
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(40);
|
||||
width: 50%;
|
||||
height: vh(60);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(8);
|
||||
@@ -364,26 +365,26 @@
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: vw(4);
|
||||
height: vh(40);
|
||||
height: vh(60);
|
||||
background-color: #0096ff;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: vw(10);
|
||||
height: vw(10);
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
margin: 0 vw(16);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
width: vw(130);
|
||||
// width: vw(130);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(22);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
@@ -391,11 +392,12 @@
|
||||
}
|
||||
|
||||
.alarm {
|
||||
width: vw(200);
|
||||
width: vw(600);
|
||||
background: #0a4190;
|
||||
|
||||
&__wrapper {
|
||||
width: vw(200);
|
||||
width: vw(400);
|
||||
width:100%;
|
||||
height: vh(270);
|
||||
background: #054581; /* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
@@ -418,15 +420,15 @@
|
||||
&:nth-child(2n) {
|
||||
background: #054d8d;
|
||||
}
|
||||
height: vh(40);
|
||||
height: vh(60);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-item__rank {
|
||||
width: vw(24);
|
||||
height: vh(16);
|
||||
font-size: vw(12);
|
||||
width: vw(34);
|
||||
height: vh(30);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -445,7 +447,7 @@
|
||||
&-item__content {
|
||||
padding-left: vw(20);
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,8 +50,7 @@
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:label="item.name"
|
||||
:width="150"
|
||||
:height="150"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,19 +109,20 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.work-box-3 {
|
||||
width: vw(840);
|
||||
width: vw(1000);
|
||||
margin-top: vh(120);
|
||||
margin-left: vw(8);
|
||||
|
||||
.work-box-1 {
|
||||
padding: 0 vw(20);
|
||||
height: vh(566);
|
||||
// height: vh(566);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.list {
|
||||
height: vh(500);
|
||||
height: vh(1600);
|
||||
// height:100%;
|
||||
overflow: auto;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
@@ -147,20 +147,23 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: vh(8) vh(10);
|
||||
padding: vh(20) vh(10);
|
||||
.label {
|
||||
width: vw(60);
|
||||
height: vh(24);
|
||||
line-height: vh(24);
|
||||
height: vh(34);
|
||||
line-height: vh(34);
|
||||
color: #fff;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
.label--primary {
|
||||
@extend .label;
|
||||
width:initial;
|
||||
height:initial;
|
||||
padding:vw(15);
|
||||
background: #2380fb;
|
||||
}
|
||||
.label--warning {
|
||||
@@ -173,7 +176,7 @@
|
||||
}
|
||||
.time {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(18);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
@@ -183,7 +186,7 @@
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: vw(15);
|
||||
font-size: font-vw(20);
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
@@ -202,8 +205,8 @@
|
||||
.work-2-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: vh(380);
|
||||
margin-bottom: vw(8);
|
||||
// height: vh(380);
|
||||
margin-bottom: vw(20);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.chart-box {
|
||||
@@ -219,7 +222,7 @@
|
||||
justify-content: space-around;
|
||||
&-item {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
}
|
||||
&-item__icon {
|
||||
width: vw(24);
|
||||
@@ -227,7 +230,7 @@
|
||||
}
|
||||
&-item__label {
|
||||
color: #fff;
|
||||
font-size: vw(14);
|
||||
font-size: font-vw(20);
|
||||
}
|
||||
&-item__value {
|
||||
position: relative;
|
||||
@@ -237,11 +240,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
font-size: font-vw(28);
|
||||
color: #fff;
|
||||
&--primary {
|
||||
@extend .statistics-item__value;
|
||||
color: #02f9fa;
|
||||
|
||||
background-image: url('@/assets/images/mask-primary.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@@ -262,7 +266,7 @@
|
||||
}
|
||||
}
|
||||
&-item__value-suffix {
|
||||
font-size: vw(12);
|
||||
font-size: font-vw(12);
|
||||
margin-top: vh(6);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
top: '56%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
fontSize: fitChartSize(20)
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -175,7 +175,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pie {
|
||||
width: vw(200);
|
||||
height: vh(200);
|
||||
width: vw(250);
|
||||
height: vh(250);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user