From 69758b26403c3c97ad35c2c76125a1ff36a3e9d0 Mon Sep 17 00:00:00 2001
From: rk <94314517@qq.com>
Date: 星期四, 20 十一月 2025 12:08:01 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/maanshan' into maanshan
---
screen/src/assets/images/ic_weibao@2x.png | 0
screen/src/views/KeyCabinet.vue | 1205 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
screen/src/assets/images/bg.png | 0
screen/src/assets/images/ic_kongxian@2x.png | 0
screen/src/assets/images/ic_lingyong@2x.png | 0
screen/src/assets/images/ic_zongguige@2x.png | 0
screen/src/assets/images/ic_zaiwei@2x.png | 0
screen/src/assets/images/ic_guihao@2x.png | 0
screen/vite.config.js | 4
screen/src/router/index.js | 8
10 files changed, 1,215 insertions(+), 2 deletions(-)
diff --git a/screen/src/assets/images/bg.png b/screen/src/assets/images/bg.png
new file mode 100644
index 0000000..f25787a
--- /dev/null
+++ b/screen/src/assets/images/bg.png
Binary files differ
diff --git a/screen/src/assets/images/ic_guihao@2x.png b/screen/src/assets/images/ic_guihao@2x.png
new file mode 100644
index 0000000..e884fab
--- /dev/null
+++ b/screen/src/assets/images/ic_guihao@2x.png
Binary files differ
diff --git a/screen/src/assets/images/ic_kongxian@2x.png b/screen/src/assets/images/ic_kongxian@2x.png
new file mode 100644
index 0000000..bb89de8
--- /dev/null
+++ b/screen/src/assets/images/ic_kongxian@2x.png
Binary files differ
diff --git a/screen/src/assets/images/ic_lingyong@2x.png b/screen/src/assets/images/ic_lingyong@2x.png
new file mode 100644
index 0000000..ad5b6df
--- /dev/null
+++ b/screen/src/assets/images/ic_lingyong@2x.png
Binary files differ
diff --git a/screen/src/assets/images/ic_weibao@2x.png b/screen/src/assets/images/ic_weibao@2x.png
new file mode 100644
index 0000000..21a4c5d
--- /dev/null
+++ b/screen/src/assets/images/ic_weibao@2x.png
Binary files differ
diff --git a/screen/src/assets/images/ic_zaiwei@2x.png b/screen/src/assets/images/ic_zaiwei@2x.png
new file mode 100644
index 0000000..329d353
--- /dev/null
+++ b/screen/src/assets/images/ic_zaiwei@2x.png
Binary files differ
diff --git a/screen/src/assets/images/ic_zongguige@2x.png b/screen/src/assets/images/ic_zongguige@2x.png
new file mode 100644
index 0000000..a4eb698
--- /dev/null
+++ b/screen/src/assets/images/ic_zongguige@2x.png
Binary files differ
diff --git a/screen/src/router/index.js b/screen/src/router/index.js
index acffd61..a11e0eb 100644
--- a/screen/src/router/index.js
+++ b/screen/src/router/index.js
@@ -71,6 +71,14 @@
},
component: () => import('../views/TaskEfficiency.vue')
},
+ {
+ path: '/KeyCabinet', // 閽ュ寵鏌滄暟鎹湅鏉�
+ name: 'KeyCabinet',
+ meta: {
+ title: '閽ュ寵鏌滄暟鎹湅鏉�'
+ },
+ component: () => import('../views/KeyCabinet.vue')
+ },
]
})
diff --git a/screen/src/views/KeyCabinet.vue b/screen/src/views/KeyCabinet.vue
new file mode 100644
index 0000000..70602d4
--- /dev/null
+++ b/screen/src/views/KeyCabinet.vue
@@ -0,0 +1,1205 @@
+<template>
+ <v-scale-screen width="1920" height="960">
+ <div class="main_app">
+ <img src="@/assets/images/bg.png" class="main_bg" alt="" />
+ <div class="main_header">
+ <img src="@/assets/images/maintitle.gif" 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="left_box_one_item">
+ <img src="../assets/images/ic_zongguige@2x.png" />
+ <div class="left_box_one_item_info">
+ <span>鎬绘煖鏍�</span>
+ <span>24</span>
+ </div>
+ </div>
+ <div class="left_box_one_item">
+ <img src="../assets/images/ic_zaiwei@2x.png" />
+ <div class="left_box_one_item_info">
+ <span>鍦ㄤ綅</span>
+ <span>24</span>
+ </div>
+ </div>
+ <div class="left_box_one_item">
+ <img src="../assets/images/ic_lingyong@2x.png" />
+ <div class="left_box_one_item_info">
+ <span>棰嗙敤</span>
+ <span>24</span>
+ </div>
+ </div>
+ <div class="left_box_one_item">
+ <img src="../assets/images/ic_kongxian@2x.png" />
+ <div class="left_box_one_item_info">
+ <span>绌洪棽</span>
+ <span>24</span>
+ </div>
+ </div>
+ <div class="left_box_one_item">
+ <img src="../assets/images/ic_weibao@2x.png" />
+ <div class="left_box_one_item_info">
+ <span>缁翠繚</span>
+ <span>24</span>
+ </div>
+ </div>
+ </div>
+ <div class="left_box_three">
+ <div class="three_one">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>娲捐溅缁熻</div>
+ </div>
+ <div class="tabs">
+ <div class="tab active">杩�7澶�</div>
+ <div class="separate"> 锝� </div>
+ <div class="tab">杩�15澶�</div>
+ </div>
+ <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="three_one_chat"></div>
+ </div>
+ <div style="width: 20px; height: 100%"></div>
+ <div class="three_two">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>閽ュ寵棰嗗彇褰掕繕缁熻</div>
+ </div>
+ <div class="tabs">
+ <div class="tab active">杩�7澶�</div>
+ <div class="separate"> 锝� </div>
+ <div class="tab">杩�15澶�</div>
+ </div>
+ <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="three_two_chat"></div>
+ </div>
+
+ <div class="echart_wrap">
+ <div class="echart2" id="echart2"></div>
+ </div>
+ </div>
+
+ <div class="left_box_two">
+ <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/task/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="list_wrap">
+ <div class="header line">
+ <span class="item">鍚堝悓鍙�</span>
+ <span class="item status">璁㈠崟鐘舵��</span>
+ <span class="item">鐩殑鍦�</span>
+ <span class="item">浠诲姟涓嬭揪鏃堕棿</span>
+ </div>
+ <div class="one-swiper list">
+ <div class="swiper-wrapper">
+ <div class="line one-swiper-slide swiper-slide item" v-for="item in 8" :key="item">
+ <span class="item">contractNumber</span>
+ <span class="item status">statusDesc</span>
+ <span class="item">receiveEnterprise</span>
+ <span class="item">createDate</span>
+ </div>
+ </div>
+ </div>
+<!-- <template>-->
+<!-- <Loading />-->
+<!-- <div class="empty">-->
+<!-- <img src="@/assets/images/default_nodata.png" alt="">-->
+<!-- </div>-->
+<!-- </template>-->
+ </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/task/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="content1">
+ <div class="row">
+ <div class="row-title">
+ <div class="row-title-left">
+ <img src="@/assets/images/FireFighting/ic_title_green@2x.png" />
+ <span>閽ュ寵鍛婅鍒嗗竷</span>
+ </div>
+ <div class="row-title-right">
+ <span class="ac">浠婃棩</span>
+ |
+ <span>鏈湀</span>
+ |
+ <span>鏈勾</span>
+ </div>
+ </div>
+ <div class="car_static">
+ <div class="echart_wrap">
+ <div class="pie_text">
+ <div class="fs30"><strong>30</strong></div>
+ <div>鍏ュ簱鎬婚噺</div>
+ </div>
+ <div class="echart1" id="echart1"></div>
+ </div>
+ <div class="list">
+ <div class="item1">
+ <div class="line">
+ <div class="icon"></div>
+ <div class="text">閰掔簿妫�娴嬪憡璀�</div>
+ </div>
+ <div class="num">16娆★綔55.0%</div>
+ </div>
+ <div class="item1">
+ <div class="line">
+ <div class="icon"></div>
+ <div class="text">鏌滈棬鏈叧鍛婅</div>
+ </div>
+ <div class="num">12娆★綔40.0%</div>
+ </div>
+ <div class="item1">
+ <div class="line">
+ <div class="icon"></div>
+ <div class="text">瓒呮椂鏈繕鍛婅</div>
+ </div>
+ <div class="num">2娆★綔5.0%</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="row-title">
+ <div class="row-title-left">
+ <img src="@/assets/images/FireFighting/ic_title_green@2x.png" />
+ <span>鍛婅鏄庣粏</span>
+ </div>
+ </div>
+ <div class="list1 three-swiper">
+ <div class="swiper-wrapper">
+ <div class="item three-swiper-slide swiper-slide" v-for="(item, i) in alarm">
+ <div class="icon">
+ <div class="circle"></div>
+ <div class="line"></div>
+ </div>
+ <div class="content">
+ <div class="header">
+ <div class="time">07鏈�07鏃� 14:23:22</div>
+ <div class="time">鎿嶄綔浜猴細鍞愬鏉�</div>
+ </div>
+ <div class="main">
+ <div class="left">
+ <div class="title">
+ <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
+ <span>閰掔簿妫�娴嬭秴鏍�</span>
+ <div class="data">
+ <img src="@/assets/images/ic_guihao@2x.png" />
+ <span>鏌滃彿锛�19</span>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="status">澶勭悊涓�</div> -->
+ </div>
+ </div>
+ </div>
+<!-- <div v-if="data7.length == 0" class="empty_wrap" style="margin-top: 50px;">-->
+<!-- <img src="@/assets/images/default_empty.png" alt="">-->
+<!-- </div>-->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </v-scale-screen>
+</template>
+
+<script setup>
+ import VScaleScreen from 'v-scale-screen'
+ import {onMounted, ref} from 'vue'
+ import dayjs from 'dayjs'
+ import * as echarts from 'echarts'
+ import duration from 'dayjs/plugin/duration'
+ import 'swiper/css/swiper.min.css'
+ import Swiper from 'swiper'
+ import {zxenergyDataList, zxloadCurve} from '@/api'
+
+ dayjs.extend(duration)
+
+
+ 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 data4 = ref([])
+ const data2 = ref([])
+ const alarm = ref([{},{},{},{},{},{},{},{}])
+ const claimRecord = ref([{},{},{},{},{},{},{},{}])
+
+ const getData4 = () => {
+ zxloadCurve().then(res => {
+ const result = res.data || []
+ data4.value = result
+ if (data4.value && data4.value.length > 0) {
+ initLoadReal()
+ }
+ })
+ }
+
+ const initLoadReal = () => {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ var myChart = echarts.init(document.querySelector('.three_one_chat'))
+ // 缁樺埗鍥捐〃
+ myChart.setOption({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ },
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ color: '#D2E0FF'
+ },
+ data: data4.value.map(i => i.timeData)
+ },
+ yAxis: {
+ type: 'value',
+ name: '鍗曚綅锛氳締',
+ nameTextStyle: {
+ padding: [0, 0, 0, -16], // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ color: '#D2E0FF'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+ color: 'rgba(255,255,255,0.14)',
+ type: 'dashed',
+ },
+ splitNumber: 4
+ },
+ axisLabel: {
+ color: '#D2E0FF'
+ }
+ },
+ grid: {
+ top: '18%',
+ left: '4%',
+ right: '2%',
+ bottom: '2%',
+ containLabel: true
+ },
+ series: [
+ {
+ data: data4.value.map(i => i.energy),
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: "#00F2F3" // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: "rgba(0,0,0,.3)" // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ }
+ }
+ },
+ lineStyle: { // 绾挎潯鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#00F2F3' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#00F2F3' // 100% 澶勭殑棰滆壊
+ }],
+ },
+ width: 2, // 绾挎潯绮楃粏
+ },
+ symbol: 'circle',
+ symbolSize: 0,
+ itemStyle: {
+ normal: {
+ color: '#00F2F3', //鎶樼嚎鐐圭殑棰滆壊
+ },
+ },
+ smooth: true
+ }
+ ]
+ })
+
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ }
+
+ const getData2 = () => {
+ zxenergyDataList({ type: 0 }).then(res => {
+ data2.value = res.data || []
+ initEnergy()
+ })
+ }
+
+ const initEnergy = () => {
+ var myChart = echarts.init(document.querySelector('.three_two_chat'))
+
+ myChart.setOption({
+ grid: {
+ top: '20%',
+ left: '6%',
+ right: '2%',
+ bottom: '4%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ color: '#D2E0FF'
+ },
+ data: data2.value.map(i => dayjs(i.timeData).format('M'))
+ },
+ yAxis: {
+ type: 'value',
+ name: '鍗曚綅锛歬',
+ axisLabel: {
+ color: '#D2E0FF'
+ },
+ nameTextStyle: {
+ color: '#D2E0FF',
+ padding: [0, 0, 4, -30] // 鍥涗釜鏁板瓧鍒嗗埆涓轰笂鍙充笅宸︿笌鍘熶綅缃窛绂�
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ //杩欓噷杈撳叆绾挎潯鐨勬牱寮�
+ color: 'rgba(255,255,255,0.14)',
+ }
+ }
+ },
+ series: [
+ {
+ data: data2.value.map(i => i.energy),
+ type: 'bar',
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ { offset: 0, color: '#50afd3' },
+ { offset: 1, color: '#1d4861' }
+ ]
+ ),
+ barBorderRadius: [3, 3, 0, 0]
+ }
+ }
+ },
+ {
+ data: data2.value.map(i => i.energy),
+ type: 'bar',
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ { offset: 0, color: 'rgb(255,184,0)' },
+ { offset: 1, color: 'rgba(255, 138, 0, 0.20)' }
+ ]
+ ),
+ barBorderRadius: [3, 3, 0, 0]
+ }
+ }
+ }
+ ]
+ })
+ window.addEventListener('resize', function () {//鎵ц
+ myChart.resize()
+ })
+ }
+
+ const autoplayFlag = (list = [], leng = 4, time = 2000) => {
+ if (list.length > leng) {
+ return { delay: time, disableOnInteraction: false }
+ } else {
+ return false
+ }
+ }
+
+ const loopFn1 = () => {
+ var newSwiper1 = new Swiper('.one-swiper', {
+ initialSlide: 0,
+ direction: 'vertical', //绔栫洿鏂瑰悜
+ slidesPerView: 4,
+ autoplay: autoplayFlag(claimRecord.value, 4, 6000),
+ observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ })
+ }
+
+ const loopFn7 = () => {
+ var newSwiper1 = new Swiper('.three-swiper', {
+ initialSlide: 0,
+ // loop: true, // 寰幆妯″紡閫夐」
+ direction: 'vertical', //绔栫洿鏂瑰悜
+ slidesPerView: 4,
+ // autoplay: { delay: 500, disableOnInteraction: false },
+ autoplay: autoplayFlag(alarm.value, 4, 4000),
+ observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+ })
+ }
+
+ onMounted(() => {
+ // getData1()
+ getData2()
+ // getData3()
+ getData4()
+ // getData5()
+ // getData6()
+ // getData7()
+ //
+ // setInterval(() => {
+ // getData1()
+ // getData2()
+ // getData3()
+ // getData4()
+ // getData5()
+ // getData6()
+ // getData7()
+ // }, 1000 * 60)
+ //
+ // setTimeout(() => {
+ // loopFn2()
+ // loopFn5()
+ // loopFn7()
+ // loopFn6()
+ // }, 12000)
+ setTimeout(() => {
+ loopFn1()
+ loopFn7()
+ }, 12000)
+ })
+
+
+</script>
+
+<style lang="scss" scoped>
+ div {
+ box-sizing: border-box;
+ }
+
+ .main_content {
+ display: flex;
+ padding: 20px 25px 0;
+
+ .left_box {
+ flex: 1;
+
+ .left_box_one {
+ width: 100%;
+ margin: 30px 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .left_box_one_item {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 70px;
+ height: 73px;
+ margin-right: 20px;
+ }
+ .left_box_one_item_info {
+ display: flex;
+ flex-direction: column;
+ span {
+ &:nth-child(1) {
+ font-weight: 600;
+ font-size: 18px;
+ color: #D2E0FF;
+ }
+ &:nth-child(2) {
+ font-weight: bold;
+ font-size: 36px;
+ color: #FFFFFF;
+ line-height: 54px;
+ text-shadow: 0px 2px 17px rgba(0,0,0,0.32);
+ }
+ }
+ }
+ }
+ }
+
+ .left_box_two {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+
+ .list_wrap {
+ position: relative;
+
+ .list {
+ height: 200px;
+ overflow: hidden;
+ }
+
+ .empty {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 200px;
+
+ img {
+ width: 144px;
+ }
+ }
+
+ .line {
+ display: flex;
+ height: 50px;
+ padding: 0 20px;
+ box-sizing: border-box;
+ align-items: center;
+ font-size: 14px;
+ color: #D2E0FF;
+ cursor: pointer;
+
+ &:nth-of-type(2n) {
+ background: rgba(134, 156, 201, 0.05);
+ }
+
+ .item {
+ flex: 4;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .status {
+ flex: 3.2;
+ }
+ }
+
+ .avtive {
+ background: rgba(1, 171, 254, 0.2);
+ color: #01D9FE;
+ font-weight: 600;
+ }
+
+ .header {
+ width: 100%;
+ height: 50px;
+ padding: 0 20px;
+ box-sizing: border-box;
+ background: rgba(134,156,201,0.1);
+ font-weight: 500;
+ color: #01D9FE;
+ }
+ }
+ }
+
+ .left_box_three {
+ width: 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .three_one {
+ flex: 0.9;
+
+ .three_one_chat {
+ width: 100%;
+ height: 328px;
+ background: rgba(255,255,255,0.03);
+ }
+ }
+
+ .three_two {
+ flex: 1.1;
+
+ .three_two_chat {
+ width: 100%;
+ height: 328px;
+ background: rgba(255,255,255,0.03);
+ }
+ }
+ }
+ }
+
+ .right_box {
+ width: 440px;
+ margin-left: 15px;
+ flex-shrink: 0;
+
+ .right_box_one {
+ background: rgba(0, 86, 255, 0.05);
+ backdrop-filter: blur(5px);
+ background: rgba(0, 86, 255, 0.05);
+ backdrop-filter: blur(5px);
+
+ .static_wrap {
+ display: flex;
+ padding: 20px 0 15px;
+
+ .item {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .name {
+ font-size: 14px;
+ color: #D2E0FF;
+ }
+
+ .num {
+ font-size: 22px;
+ font-weight: 500;
+
+ }
+ }
+ }
+
+ .content1 {
+ width: 100%;
+ height: 778px;
+ padding: 25px;
+ box-sizing: border-box;
+ background: rgba(255,255,255,0.03);
+
+ .row {
+ width: 100%;
+ margin-bottom: 70px;
+
+ &:last-child {
+ margin: 0 !important;
+ }
+
+ .list1 {
+ height: 344px;
+ overflow: hidden;
+ scrollbar-width: none;
+
+ .item {
+ display: flex;
+ font-size: 13px;
+ color: #D2E0FF;
+ height: 86px;
+
+ .icon {
+ width: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 10px;
+
+ .circle {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #01D9FE;
+ box-shadow: 0px 0px 1px 4px #34788f;
+ /* opacity: 0.52; */
+ }
+
+ .line {
+ margin-top: 3px;
+ width: 1px;
+ flex: 1;
+ background-color: #153947;
+ }
+ }
+
+ .content {
+ flex: 1;
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .status {
+ width: 22px;
+ height: 18px;
+ line-height: 18px;
+ text-align: center;
+ border-radius: 2px;
+ border: 1px solid #01D9FE;
+ font-size: 12px;
+ color: #01D9FE;
+ }
+
+ .time {
+ font-size: 13px;
+ color: #D2E0FF;
+ }
+ }
+
+ .main {
+ height: 40px;
+ background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
+ border-radius: 2px 0px 0px 2px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ border: 1px solid;
+ margin-top: 8px;
+ padding: 0 10px;
+ border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;
+
+ .left {
+
+ .title {
+ font-size: 13px;
+ margin-bottom: 4px;
+ display: flex;
+ align-items: center;
+
+ .xf {
+ width: 14px;
+ height: 14px;
+ margin-right: 6px;
+ }
+
+ .data {
+ margin-left: 63px;
+ display: flex;
+ align-items: center;
+ img {
+ width: 12px;
+ height: 12px;
+ margin-right: 5px;
+ }
+ span {
+ font-weight: 400;
+ font-size: 13px;
+ color: #D2E0FF;
+ }
+ }
+ }
+ }
+
+
+
+ .status {
+ padding: 0 8px;
+ font-size: 13px;
+ color: #D2E0FF;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ background: #132c56;
+ border-radius: 2px;
+ border: 1px solid rgba(1, 147, 254, 0.6);
+ }
+ }
+ }
+ }
+ }
+
+ .row-title {
+ width: 100%;
+ margin-bottom: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .row-title-left {
+ display: flex;
+ align-items: center;
+ img {
+ width: 17px;
+ height: 17px;
+ margin-right: 7px;
+ }
+ span {
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+ }
+ }
+ .row-title-right {
+ display: flex;
+ align-items: center;
+ .ac {
+ color: #0094EB !important;
+ }
+ span {
+ font-weight: 600;
+ font-size: 14px;
+ color: #D2E0FF;
+ cursor: pointer;
+ }
+ }
+ }
+ .car_static {
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ height: 218px;
+
+ .echart_wrap {
+ position: relative;
+
+ .pie_text {
+ width: 100px;
+ height: 100px;
+ 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;
+ }
+ }
+ }
+
+ .echart1 {
+ width: 130px;
+ height: 130px;
+ }
+
+ .list {
+ display: flex;
+ flex-direction: column;
+
+ .item1 {
+ width: 100%;
+ font-size: 14px;
+ margin-bottom: 14px;
+
+ .line {
+ display: flex;
+ align-items: center;
+ margin-bottom: 2px;
+
+ .icon {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-right: 10px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ }
+ }
+
+ .num {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .echart_wrap {
+ width: 100%;
+
+ .echart3 {
+ width: 100%;
+ height: 160px;
+ }
+ }
+
+ .list {
+ margin: 0 20px 0;
+ width: 430px;
+ overflow: hidden;
+ scrollbar-width: none;
+
+ .line {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ height: 33px !important;
+ color: #D2E0FF;
+ width: 100%;
+
+ .time_wrap {
+ display: flex;
+ align-items: center;
+ width: 52px;
+ color: #FFFFFF;
+
+ .time {
+ width: 40px;
+ height: 18px;
+ line-height: 18px;
+ text-align: center;
+ background: #00A68E;
+ border-radius: 2px;
+ }
+
+ .sp {
+ width: 10px;
+ height: 1px;
+ background: #00A68E;
+ }
+
+ .dian {
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ background: #00A68E;
+ }
+ }
+
+ .id_card {
+ flex: 6;
+ margin-left: 12px;
+ }
+
+ .status {
+ flex: 5;
+ }
+
+ .desc {
+ flex: 9;
+ }
+ }
+ }
+
+ }
+
+ .right_box_two {
+ padding: 20px 20px 0;
+ margin-top: 20px;
+
+ .list {
+ height: 220px;
+ overflow: hidden;
+ scrollbar-width: none;
+ background: rgba(0, 86, 255, 0.05);
+ backdrop-filter: blur(5px);
+ padding-top: 15px;
+
+ .item {
+ display: flex;
+ font-size: 13px;
+ color: #D2E0FF;
+ height: 110px;
+
+ .icon {
+ width: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding-top: 10px;
+
+ .circle {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #01D9FE;
+ box-shadow: 0px 0px 1px 4px #34788f;
+ /* opacity: 0.52; */
+ }
+
+ .line {
+ margin-top: 3px;
+ width: 1px;
+ flex: 1;
+ background-color: #153947;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .swiper-wrapper {
+ display: block !important;
+ }
+ }
+
+ .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: 130px;
+ display: flex;
+ justify-content: flex-end;
+ font-size: 30px;
+ }
+
+ .week {
+ margin-left: 20px;
+ }
+ }
+
+ .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;
+ }
+
+ .tab {
+ cursor: pointer;
+ }
+
+ .active {
+ color: #0094eb;
+ }
+ }
+ }
+
+ .main_app {
+ width: 1920px;
+ height: 960px;
+ /* width: 100%;
+ height: 100vh; */
+ background: #04141c;
+ 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>
diff --git a/screen/vite.config.js b/screen/vite.config.js
index 31658b3..ff40646 100644
--- a/screen/vite.config.js
+++ b/screen/vite.config.js
@@ -26,8 +26,8 @@
proxy: {
"/gateway_interface": {
// target: "http://192.168.0.104:10010",
- target: "http://10.50.250.253:8088/gateway_interface",
- // target: "https://atwl.ahzyssl.com/zhyq_interface",
+ // target: "http://10.50.250.253:8088/gateway_interface",
+ target: "https://atwl.ahzyssl.com/zhyq_interface",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/gateway_interface/, ""),
},
--
Gitblit v1.9.3