From a2e5b78d3677cb0999c0b7faa6c93d97810370e2 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 14 十月 2024 17:04:53 +0800
Subject: [PATCH] ll
---
h5/utils/config.js | 4
screen/src/assets/images/SecurityControl/jiankong_ic_open@2x.png | 0
screen/src/utils/scale_screen.js | 2
admin/src/views/platform/components/PlatformQueuing.vue | 1
screen/src/assets/images/SecurityControl/staff_ic_fangke@2x.png | 0
screen/src/assets/images/SecurityControl/bg@2x.png | 0
screen/src/assets/images/SecurityControl/ic_title_green@2x.png | 0
screen/src/views/LogisticsEfficiency.vue | 62 +++
admin/src/views/business/approvalConfiguration.vue | 9
admin/src/components/business/OperaMemberRoleWindow.vue | 22 +
admin/src/views/operation/serviceCar/apprConfig.vue | 11
screen/src/router/index.js | 5
screen/src/views/SecurityControl.vue | 845 +++++++++++++++++++++++++++++++++++++++++++++++++
admin/src/views/business/approvalReport.vue | 9
screen/src/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png | 0
screen/src/views/PlatformCall.vue | 2
admin/src/components/operation/OperCarUseBookParamWindow.vue | 2
screen/src/assets/images/SecurityControl/staff_ic_neibu@2x.png | 0
screen/src/assets/images/SecurityControl/title_short@2x.png | 0
screen/src/assets/images/SecurityControl/anfang_ic_data@2x.png | 0
admin/src/components/common/CommonHeader.vue | 2
admin/.env.development | 4
22 files changed, 961 insertions(+), 19 deletions(-)
diff --git a/admin/.env.development b/admin/.env.development
index 0571e3b..18fd4c2 100644
--- a/admin/.env.development
+++ b/admin/.env.development
@@ -3,6 +3,6 @@
VUE_APP_API_URL = 'http://localhost:10010'
# VUE_APP_API_URL = 'http://192.168.0.139:10010'
-# VUE_APP_API_URL = 'http://10.50.250.253:8088/gateway_interface'
-VUE_APP_API_URL = 'https://dmtest.ahapp.net/antai_admin_interface/'
+VUE_APP_API_URL = 'http://10.50.250.253:8088/gateway_interface'
+# VUE_APP_API_URL = 'https://dmtest.ahapp.net/antai_admin_interface/'
diff --git a/admin/src/components/business/OperaMemberRoleWindow.vue b/admin/src/components/business/OperaMemberRoleWindow.vue
index 930d160..9c4b0eb 100644
--- a/admin/src/components/business/OperaMemberRoleWindow.vue
+++ b/admin/src/components/business/OperaMemberRoleWindow.vue
@@ -39,6 +39,7 @@
:filter-method="filterMethod"
filter-placeholder="璇疯緭鍏ラ棬绂佺偣鍒嗙粍鍚嶇О"
v-model="form.roleIds"
+ class="transfer"
:data="roles">
</el-transfer>
</el-form-item>
@@ -211,7 +212,22 @@
}
}
}
-.el-transfer-panel {
- width: 350px !important;
-}
+.transfer {
+ height: 600px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ ::v-deep .el-transfer-panel{
+ flex: 1;
+ height: 100%;
+ }
+ ::v-deep .el-transfer-panel__body {
+ height: 500px;
+ }
+
+ ::v-deep .el-transfer-panel__list.is-filterable {
+ height: 480px;
+ }
+ }
</style>
diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue
index cc86262..cab4be2 100644
--- a/admin/src/components/common/CommonHeader.vue
+++ b/admin/src/components/common/CommonHeader.vue
@@ -9,7 +9,7 @@
<div class="linellae"></div>
</div>
<div class="item" @click="getHeaderNav('0')">瀹夐槻涓績</div>
- <div class="item" @click="getHeaderNav('1')">娑堥槻涓績</div>
+ <div class="item" @click="getHeaderNav('1')">娑堟帶涓績</div>
<div class="item" @click="getHeaderNav('2')">鑳界涓績</div>
<div class="item" @click="getHeaderNav('3')">椹鹃┒鑸�</div>
</div>
diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue
index 10d590b..c571bcb 100644
--- a/admin/src/components/operation/OperCarUseBookParamWindow.vue
+++ b/admin/src/components/operation/OperCarUseBookParamWindow.vue
@@ -533,7 +533,7 @@
},
initData () {
getCarList({
- type: 1
+ type: 0
}).then(res => {
this.carsList = res
})
diff --git a/admin/src/views/business/approvalConfiguration.vue b/admin/src/views/business/approvalConfiguration.vue
index f894e52..32fcdba 100644
--- a/admin/src/views/business/approvalConfiguration.vue
+++ b/admin/src/views/business/approvalConfiguration.vue
@@ -686,9 +686,18 @@
}
.transfer {
height: 600px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ ::v-deep .el-transfer-panel{
+ flex: 1;
+ height: 100%;
+ }
::v-deep .el-transfer-panel__body {
height: 500px;
}
+
::v-deep .el-transfer-panel__list.is-filterable {
height: 480px;
}
diff --git a/admin/src/views/business/approvalReport.vue b/admin/src/views/business/approvalReport.vue
index cb2cfef..2b17706 100644
--- a/admin/src/views/business/approvalReport.vue
+++ b/admin/src/views/business/approvalReport.vue
@@ -672,9 +672,18 @@
}
.transfer {
height: 600px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ ::v-deep .el-transfer-panel{
+ flex: 1;
+ height: 100%;
+ }
::v-deep .el-transfer-panel__body {
height: 500px;
}
+
::v-deep .el-transfer-panel__list.is-filterable {
height: 480px;
}
diff --git a/admin/src/views/operation/serviceCar/apprConfig.vue b/admin/src/views/operation/serviceCar/apprConfig.vue
index a26b625..bd527f8 100644
--- a/admin/src/views/operation/serviceCar/apprConfig.vue
+++ b/admin/src/views/operation/serviceCar/apprConfig.vue
@@ -154,7 +154,7 @@
<span>閮ㄩ棬涓荤</span>
</div>
<div class="config_data_item_reviewed_r">
- <span>琚浜虹殑</span>
+ <span>鐢宠浜虹殑</span>
<el-select
v-model="apprList[activeIndex].objLevel"
placeholder="璇烽�夋嫨"
@@ -691,9 +691,18 @@
}
.transfer {
height: 600px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ ::v-deep .el-transfer-panel{
+ flex: 1;
+ height: 100%;
+ }
::v-deep .el-transfer-panel__body {
height: 500px;
}
+
::v-deep .el-transfer-panel__list.is-filterable {
height: 480px;
}
diff --git a/admin/src/views/platform/components/PlatformQueuing.vue b/admin/src/views/platform/components/PlatformQueuing.vue
index a82175c..70c5764 100644
--- a/admin/src/views/platform/components/PlatformQueuing.vue
+++ b/admin/src/views/platform/components/PlatformQueuing.vue
@@ -259,6 +259,7 @@
.footer {
.detail {
color: $primaryColor;
+ cursor: pointer;
}
}
}
diff --git a/h5/utils/config.js b/h5/utils/config.js
index d600971..fc2d158 100644
--- a/h5/utils/config.js
+++ b/h5/utils/config.js
@@ -1,6 +1,6 @@
-// export const baseUrl = 'admin_interface/'
-export const baseUrl = 'http://192.168.0.173/gateway_interface/'
+export const baseUrl = 'admin_interface/'
+// export const baseUrl = 'http://192.168.0.173/gateway_interface/'
export const uploadAvatar = `${baseUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`
export const uploadUrl = `${baseUrl}visitsAdmin/cloudService/public/uploadBatch`
diff --git a/screen/src/assets/images/SecurityControl/anfang_ic_data@2x.png b/screen/src/assets/images/SecurityControl/anfang_ic_data@2x.png
new file mode 100644
index 0000000..84cbc94
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/anfang_ic_data@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/bg@2x.png b/screen/src/assets/images/SecurityControl/bg@2x.png
new file mode 100644
index 0000000..58acee1
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/bg@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/ic_title_green@2x.png b/screen/src/assets/images/SecurityControl/ic_title_green@2x.png
new file mode 100644
index 0000000..a173111
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/ic_title_green@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/jiankong_ic_open@2x.png b/screen/src/assets/images/SecurityControl/jiankong_ic_open@2x.png
new file mode 100644
index 0000000..ee45f00
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/jiankong_ic_open@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/staff_ic_fangke@2x.png b/screen/src/assets/images/SecurityControl/staff_ic_fangke@2x.png
new file mode 100644
index 0000000..4984c50
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/staff_ic_fangke@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/staff_ic_neibu@2x.png b/screen/src/assets/images/SecurityControl/staff_ic_neibu@2x.png
new file mode 100644
index 0000000..ea2002e
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/staff_ic_neibu@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png b/screen/src/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png
new file mode 100644
index 0000000..7741062
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png
Binary files differ
diff --git a/screen/src/assets/images/SecurityControl/title_short@2x.png b/screen/src/assets/images/SecurityControl/title_short@2x.png
new file mode 100644
index 0000000..88b887c
--- /dev/null
+++ b/screen/src/assets/images/SecurityControl/title_short@2x.png
Binary files differ
diff --git a/screen/src/router/index.js b/screen/src/router/index.js
index 69da7a3..c56a2b5 100644
--- a/screen/src/router/index.js
+++ b/screen/src/router/index.js
@@ -23,6 +23,11 @@
name: 'LogisticsControl',
component: () => import('../views/LogisticsEfficiency.vue')
},
+ {
+ path: '/SecurityControl',
+ name: 'SecurityControl',
+ component: () => import('../views/SecurityControl.vue')
+ },
]
})
diff --git a/screen/src/utils/scale_screen.js b/screen/src/utils/scale_screen.js
index 40a7ff9..6917201 100644
--- a/screen/src/utils/scale_screen.js
+++ b/screen/src/utils/scale_screen.js
@@ -1,7 +1,7 @@
// rem绛夋瘮閫傞厤閰嶇疆鏂囦欢
// 鍩哄噯澶у皬
-const baseSize = 16
+const baseSize = 14
// 璁剧疆 rem 鍑芥暟
function setRem() {
// 褰撳墠椤甸潰瀹藉害鐩稿浜� 1920瀹界殑缂╂斁姣斾緥锛屽彲鏍规嵁鑷繁闇�瑕佷慨鏀广��
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index f042f7b..ea14ba6 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -1,9 +1,8 @@
<template>
- <v-scale-screen width="1920" height="960" :fullScreen="true">
+ <v-scale-screen width="1920" height="960">
<div class="main_app">
<img src="@/assets/images/energy_ef/bg@2x.png" class="main_bg" alt="" />
<div class="main_header">
- <!-- <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> -->
<img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
<div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-璋冨害鑳芥晥璺熻釜</div>
<div class="time_wrap">
@@ -222,7 +221,16 @@
</div>
<Percent :rate="80" />
</div>
- <div class="list"></div>
+ <div class="list">
+ <div class="item">
+ <div class="la">榛勫北(鏂板埗鐨栫儫)</div>
+ <div class="val">400涓囨敮</div>
+ </div>
+ <div class="item">
+ <div class="la">榛勫北(鏂板埗鐨栫儫)</div>
+ <div class="val">400涓囨敮</div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -723,16 +731,20 @@
.list {
margin-left: 36px;
+
.item {
margin-bottom: 14px;
font-size: 14px;
- &:nth-last-child(1){
+
+ &:nth-last-child(1) {
margin: 0;
}
+
.line {
display: flex;
align-items: center;
margin-bottom: 6px;
+
.icon {
width: 12px;
height: 12px;
@@ -741,15 +753,51 @@
background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
}
}
- .num{
+
+ .num {
margin-left: 20px;
}
}
}
}
}
- .right_box_three{
+ .right_box_three {
+ .repertory {
+ .header {
+ padding: 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 14px;
+ color: #D2E0FF;
+ margin-bottom: 11px;
+ .num {
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+ }
+ }
+ .list{
+ margin-top: 22px;
+ .item{
+ width: 100%;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ &:nth-of-type(2n+1){
+ background: rgba(0,152,255,0.13);
+ }
+ .la{
+ flex: 5;
+ padding-left: 20px;
+ }
+ .val{
+ flex: 2;
+ }
+ }
+ }
+ }
}
}
}
@@ -867,7 +915,7 @@
color: #FFFFFF;
position: relative;
z-index: -2;
-
+ font-size: 14px;
.main_bg {
position: absolute;
left: 0;
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index 312e4c6..143dcc8 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -192,7 +192,7 @@
</script>
<template>
- <v-scale-screen width="1920" height="1080" :fullScreen="true">
+ <v-scale-screen width="1920" height="1080">
<div class="main_app">
<div class="main_header">
<img class="bg" src="@/assets/images/call/title@2x.png" alt="">
diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue
new file mode 100644
index 0000000..e2188dc
--- /dev/null
+++ b/screen/src/views/SecurityControl.vue
@@ -0,0 +1,845 @@
+<template>
+ <v-scale-screen width="1920" height="960">
+ <div class="main_app">
+ <img src="@/assets/images/SecurityControl/bg@2x.png" class="main_bg" alt="" />
+ <div class="main_header">
+ <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
+ <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-瀹夐槻鏅鸿兘鐩戞祴</div>
+ <div class="time_wrap">
+ <span class="date">{{ date }}</span>
+ <span class="week">{{ week }}</span>
+ <span class="time">{{ time }}</span>
+ </div>
+ </div>
+ <div class="main_content">
+ <div class="left_box">
+ <div class="left_box_one">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>瀹炴椂鍥尯杞﹁締</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="second_title">
+ <div class="title">
+ <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
+ <div>瀹炴椂鍥尯杞﹁締</div>
+ </div>
+ <div class="num_wrap">
+ <div class="la">鎬昏溅浣嶏細</div>
+ <div class="val">100</div>
+ </div>
+ </div>
+ <div class="stall_static">
+ <div class="residue">
+ <div class="la">鍓╀綑杞︿綅</div>
+ <div class="val">50</div>
+ </div>
+ <div class="total">
+ <div class="la">杞︿綅鎬绘暟</div>
+ <div class="val">50</div>
+ </div>
+ <div class="rate">
+ <div class="la">
+ <span>杞︿綅浣跨敤鐜�</span>
+ <span class="num">50%</span>
+ </div>
+ <div class="val">
+ <Percent :rate="50" />
+ </div>
+ </div>
+ </div>
+ <div class="second_title">
+ <div class="title">
+ <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
+ <div>褰撳墠鍦ㄥ洯绉佸杞﹀垎甯�</div>
+ </div>
+ </div>
+ <div class="private_car">
+ <div class="item">
+ <img src="" class="icon" alt="">
+ <div class="num">20</div>
+ <div class="name">鍛樺伐杞﹁締</div>
+ </div>
+ <div class="item">
+ <img src="" class="icon" alt="">
+ <div class="num">20</div>
+ <div class="name">鐩稿叧鏂硅溅杈�</div>
+ </div>
+ <div class="item">
+ <img src="" class="icon" alt="">
+ <div class="num">20</div>
+ <div class="name">鏉ヨ杞﹁締</div>
+ </div>
+ </div>
+ <div class="second_title">
+ <div class="title">
+ <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
+ <div>褰撳墠鍦ㄥ洯璐ц溅鍒嗗竷</div>
+ </div>
+ </div>
+ <div class="car_static">
+ <div class="echart_wrap">
+ <div class="pie_text">
+ <div class="fs30"><strong>300</strong></div>
+ <div>璐ц溅</div>
+ </div>
+ <div class="echart" id="echart1"></div>
+ </div>
+ <div class="list">
+ <div class="item">
+ <div class="line">
+ <div :style="{ background: colors[0] }" class="icon"></div>
+ <div class="text">鍐呰繍杞﹁締</div>
+ </div>
+ <div :style="{ color: colors[0] }" class="num">100</div>
+ </div>
+ <div class="item">
+ <div class="line">
+ <div :style="{ background: colors[1] }" class="icon"></div>
+ <div class="text">澶栧崗杩愯緭杞﹁締</div>
+ </div>
+ <div :style="{ color: colors[1] }" class="num">100</div>
+ </div>
+ <div class="item">
+ <div class="line">
+ <div :style="{ background: colors[2] }" class="icon"></div>
+ <div class="text">甯傚叕鍙稿嵏璐ц溅杈�</div>
+ </div>
+ <div :style="{ color: colors[2] }" class="num">100</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="center_box">
+ <div class="center_box_one">
+ <div class="list">
+ <div class="item">
+ <div class="name_wrap">
+ <div class="name">褰撳墠鍦ㄥ洯浜烘暟</div>
+ <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
+ </div>
+ <div class="num_wrap">
+ <div class="num">200</div>
+ <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
+ </div>
+ </div>
+ <div class="item">
+ <div class="name_wrap">
+ <div class="name">褰撳墠鍦ㄥ洯杞﹁締鏁�</div>
+ <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
+ </div>
+ <div class="num_wrap">
+ <div class="num">200</div>
+ <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
+ </div>
+ </div>
+ <div class="item">
+ <div class="name_wrap">
+ <div class="name">褰撳墠璁惧鎬绘暟</div>
+ <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
+ </div>
+ <div class="num_wrap">
+ <div class="num">200</div>
+ <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
+ </div>
+ </div>
+ <div class="item">
+ <div class="name_wrap">
+ <div class="name">褰撳墠鍛婅鎬绘暟</div>
+ <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
+ </div>
+ <div class="num_wrap">
+ <div class="num">200</div>
+ <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right_box">
+ <div class="right_box_one">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>鍦ㄥ洯浜哄憳鍒嗘瀽</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="second_title">
+ <div class="title">
+ <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
+ <div>褰撳墠鍦ㄥ洯浜哄憳鍒嗗竷</div>
+ </div>
+ </div>
+ <div class="static_wrap">
+ <div class="item">
+ <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt="">
+ <div class="content">
+ <div class="name">鍐呴儴鍛樺伐</div>
+ <div class="num"><span>1000</span> | 66.6%</div>
+ </div>
+ </div>
+ <div class="item">
+ <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt="">
+ <div class="content">
+ <div class="name">闀挎湡鐩稿叧鏂�</div>
+ <div class="num today"><span>1000</span> | 66.6%</div>
+ </div>
+ </div>
+ <div class="item">
+ <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt="">
+ <div class="content">
+ <div class="name">鍦ㄥ洯璁垮</div>
+ <div class="num finish"><span>1000</span> | 66.6%</div>
+ </div>
+ </div>
+ </div>
+ <div class="second_title">
+ <div class="title">
+ <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
+ <div>浠婃棩璁垮鍒嗘瀽</div>
+ </div>
+ </div>
+ <div class="visitor_list">
+ <div class="item">
+ <div class="name">寰呰闂�</div>
+ <div class="num_wrap">
+ <span class="num">22</span>
+ <span>浜�</span>
+ </div>
+ </div>
+ <div class="spacing"></div>
+ <div class="item">
+ <div class="name">宸茬櫥鏈�</div>
+ <div class="num_wrap">
+ <span class="num">22</span>
+ <span>浜�</span>
+ </div>
+ </div>
+ <div class="spacing"></div>
+ <div class="item">
+ <div class="name">宸茬寮�</div>
+ <div class="num_wrap">
+ <span class="num">22</span>
+ <span>浜�</span>
+ </div>
+ </div>
+ <div class="spacing"></div>
+ <div class="item">
+ <div class="name">婊炵暀</div>
+ <div class="num_wrap">
+ <span class="num">22</span>
+ <span>浜�</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right_box_two">
+
+ </div>
+ <div class="right_box_three">
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </v-scale-screen>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import VScaleScreen from 'v-scale-screen'
+import Percent from '@/components/percent.vue'
+import dayjs from 'dayjs'
+
+import * as echarts from 'echarts'
+const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
+const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
+const date = ref(dayjs().format('YYYY.MM.DD'))
+const week = ref(weekMap[new Date().getDay()])
+const time = ref(dayjs().format('HH:mm:ss'))
+setInterval(() => {
+ date.value = dayjs().format('YYYY-MM-DD')
+ week.value = weekMap[new Date().getDay()]
+ time.value = dayjs().format('HH:mm:ss')
+
+}, 1000)
+
+const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
+const initEnergy = () => {
+ var myChart = echarts.init(document.querySelector('.energyRef'))
+ // 缁樺埗鍥捐〃
+ const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
+ myChart.setOption({
+ grid: {
+ top: '20%',
+ left: '2%',
+ right: '2%',
+ bottom: '4%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: [1, 2, 3, 4, 4, 5]
+ },
+ yAxis: {
+ type: 'value',
+ name: 'kw路h',
+ nameTextStyle: {
+ padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+ color: 'rgba(255,255,255,0.14)',
+ }
+ }
+ },
+ series: [
+ {
+ data: [1, 2, 3, 4, 5],
+ type: 'bar',
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ { offset: 0, color: arr[1] },
+ { offset: 1, color: '#080807' }
+ ]
+ ),
+ barBorderRadius: [10, 10, 0, 0]
+ }
+ }
+ }
+ ]
+ })
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+}
+const initEchart1 = () => {
+ const myChart = echarts.init(document.getElementById('echart1'))
+ const option = {
+ series: [
+ {
+ type: 'pie',
+ radius: ['86%', '100%'],
+ label: {
+ show: false,
+ position: 'center'
+ },
+ padAngle: 5,
+ itemStyle: {
+ borderRadius: 10
+ },
+ color: colors,
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' }
+ ]
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+}
+
+onMounted(() => {
+ // initEnergy()
+ initEchart1()
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+div {
+ box-sizing: border-box;
+}
+
+.main_content {
+ display: flex;
+ padding: 20px 25px 0;
+
+ .left_box {
+ width: 360px;
+
+ .left_box_one {
+ width: 100%;
+ position: relative;
+ margin-bottom: 20px;
+ font-size: 14px;
+ color: #D2E0FF;
+
+ .second_title {
+ margin-top: 24px;
+ margin-bottom: 20px;
+ }
+
+ .stall_static {
+ display: flex;
+ margin-bottom: 40px;
+ padding: 0 20px;
+
+ .residue {
+ flex: 5;
+
+ .val {
+ color: #01D9FE;
+ }
+ }
+
+ .total {
+ flex: 5;
+ }
+
+ .rate {
+ flex: 12;
+
+ .la {
+ display: flex;
+ justify-content: space-between;
+
+ .num {
+ font-weight: 500;
+ color: #FFFFFF;
+ }
+ }
+ }
+
+ .val {
+ font-weight: bold;
+ font-size: 18px;
+ color: #FFFFFF;
+ margin-top: 6px;
+ display: flex;
+ align-items: center;
+ height: 24px;
+ }
+ }
+
+ .private_car {
+ padding: 4px 32px;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 36px;
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .icon {
+ width: 52px;
+ height: 52px;
+ margin-bottom: 10px;
+ }
+
+ .num {
+ line-height: 28px;
+ height: 28px;
+ margin-bottom: 2px;
+ font-weight: bold;
+ font-size: 18px;
+ color: #01D9FE;
+ }
+
+ }
+ }
+
+ .car_static {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 16px 24px;
+
+ .echart_wrap {
+ position: relative;
+
+ .pie_text {
+ width: 82px;
+ height: 82px;
+ border: 1px dashed rgba(1, 217, 254, 0.7);
+ border-radius: 50%;
+ position: absolute;
+
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 999;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+
+ .fs30 {
+ font-weight: bold;
+ font-size: 18px;
+ margin-bottom: 4px;
+ }
+ }
+ }
+
+ .echart {
+ width: 110px;
+ height: 110px;
+ }
+
+ .list {
+ margin-left: 36px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 110px;
+
+ .item {
+ width: 100%;
+ font-size: 14px;
+ display: flex;
+ justify-content: space-between;
+
+ .line {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6px;
+
+ .icon {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-right: 10px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ }
+ }
+
+ .num {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .center_box {
+ flex: 1;
+ margin: 0 20px;
+
+ .center_box_one {
+ padding: 8px 60px;
+
+ .list {
+ display: flex;
+ justify-content: space-between;
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .name_wrap {
+ width: 120px;
+ height: 32px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 500;
+ font-size: 13px;
+ margin-bottom: 10px;
+ position: relative;
+ }
+
+ .num_wrap {
+ width: 86px;
+ height: 75px;
+ position: relative;
+ font-size: 30px;
+
+ .num {
+ font-weight: 600;
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .right_box {
+ width: 360px;
+
+ .right_box_one {
+ margin-bottom: 20px;
+
+ .second_title {
+ margin-top: 20px;
+ }
+
+ .static_wrap {
+ padding: 14px 0 0 46px;
+
+ .item {
+ display: flex;
+ align-items: center;
+ display: flex;
+ margin-bottom: 10px;
+
+ img {
+ width: 70px;
+ height: 70px;
+ margin-right: 20px;
+ }
+
+ .content {
+ color: #FFFFFF;
+
+ .num {
+ margin-top: 8px;
+ font-size: 16px;
+ color: #00F2F3;
+
+ span {
+ font-size: 20px;
+ margin-right: 4px;
+ font-weight: 600;
+ }
+ }
+
+ .today {
+ color: #09FACD;
+ }
+
+ .finish {
+ color: #FEAF01;
+ }
+ }
+ }
+ }
+
+ .visitor_list {
+ display: flex;
+ justify-content: space-between;
+ padding: 20px;
+ .item {
+ font-size: 12px;
+ color: #D2E0FF;
+
+ .num_wrap {
+ display: flex;
+ align-items: flex-end;
+ margin-top: 8px;
+ .num{
+ font-size: 22px;
+ line-height: 22px;
+ color: #FFFFFF;
+ }
+ }
+ }
+ .spacing{
+ width: 1px;
+ height: 40px;
+ background-color: #405173;
+ margin: 0 24px;
+ }
+ }
+ }
+
+ .right_box_two {}
+
+ .right_box_three {}
+ }
+}
+
+.main_header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 90px;
+ position: relative;
+ padding: 0px 40px 16px;
+ font-weight: 600;
+ font-size: 36px;
+
+ .title {
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 70%,
+ #85b4ff 80%,
+ #74a9ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .time_wrap {
+ font-size: 26px;
+ font-weight: 600;
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 50%,
+ #85b4ff 80%,
+ #74a9ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+
+ .time {
+ width: 180px;
+ display: flex;
+ justify-content: flex-end;
+ padding-bottom: 10px;
+ font-size: 36px;
+ }
+
+ .week {
+ margin-left: 36px;
+ }
+ }
+
+ .main_header_bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: -1;
+ }
+}
+
+.com_header {
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 15px 0 13px;
+ position: relative;
+
+ .title {
+ display: flex;
+ align-items: center;
+ font-weight: bold;
+ font-size: 16px;
+ background-image: -webkit-linear-gradient(top,
+ #ffffff 0%,
+ #c8ddff 66%,
+ #85b4ff 72%,
+ #74a9ff 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 14px;
+ }
+ }
+
+ .tabs {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ color: #d2e0ff;
+
+ .separate {
+ width: 1px;
+ height: 14px;
+ background-color: #d2e0ff;
+ margin: 0 6px;
+ }
+
+ .active {
+ color: #0094eb;
+ }
+ }
+}
+
+.second_title {
+ height: 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ position: relative;
+
+ .title {
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 10px;
+ }
+ }
+
+ .num_wrap {
+ font-weight: 400;
+ font-size: 14px;
+ color: #D2E0FF;
+ display: flex;
+ align-items: center;
+
+ .val {
+ font-weight: bold;
+ font-size: 16px;
+ color: #FFFFFF;
+ }
+ }
+}
+
+.main_app {
+ width: 1920px;
+ height: 960px;
+ /* width: 100%;
+ height: 100vh; */
+ background: #0b2539;
+ color: #FFFFFF;
+ position: relative;
+ z-index: -2;
+ font-size: 14px;
+
+ .main_bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: -1;
+ }
+}
+
+.bg {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: -1;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3