From 3748cbf0a42798c6fd9e27eecd7355871f99687d Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 28 Mar 2025 10:38:05 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
/dev/null | 6 --
src/views/Home/components/HomeRight/TaskAchievements.vue | 4
src/utils/rem.js | 23 +++----
src/views/Home/components/HomeLeft/HomeLeft.vue | 1
src/main.js | 7 +-
src/views/Home/components/HomeLeft/OverviewNext.vue | 7 +-
src/styles/variables.scss | 5 -
src/assets/images/home/homeRight/completionLeft.png | 0
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 11 +--
src/components/CommonTitle.vue | 14 ++--
src/views/Home/components/HomeRight/EventOverview.vue | 95 +++++++++++++++++++++++++++++++
src/views/Home/components/HomeRight/Synergy.vue | 4
12 files changed, 126 insertions(+), 51 deletions(-)
diff --git a/src/assets/images/home/homeRight/completionLeft.png b/src/assets/images/home/homeRight/completionLeft.png
new file mode 100644
index 0000000..dbaf89f
--- /dev/null
+++ b/src/assets/images/home/homeRight/completionLeft.png
Binary files differ
diff --git a/src/components/CommonTitle.vue b/src/components/CommonTitle.vue
index 935ee50..094c04d 100644
--- a/src/components/CommonTitle.vue
+++ b/src/components/CommonTitle.vue
@@ -20,7 +20,7 @@
.overview-title {
position: relative;
width: 404px;
- height: hToV(43);
+ height: 43px;
background-image: url(@/assets/images/title-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -30,7 +30,7 @@
.left {
position: absolute;
left: 49px;
- bottom: hToV(16);
+ bottom: 16px;
font-weight: 400;
font-size: 20px;
color: #ffffff;
@@ -39,8 +39,8 @@
font-style: normal;
text-transform: none;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
- height: hToV(26);
- line-height: hToV(23);
+ height: 26px;
+ line-height: 23px;
}
.right {
@@ -48,13 +48,13 @@
font-weight: 500;
font-size: 14px;
color: #0be7f6;
- height: hToV(21);
- line-height: hToV(21);
+ height: 21px;
+ line-height: 21px;
font-family: Source Han Sans CN, Source Han Sans CN, serif;
text-align: right;
font-style: normal;
text-transform: none;
- bottom: hToV(16);
+ bottom: 16px;
right: 11px;
cursor: pointer;
}
diff --git a/src/main.js b/src/main.js
index 7285c76..e4cf81b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,8 +35,8 @@
// import formSetting from './views/tool/formsetting.vue';
// import tenantPackage from './views/system/tenantpackage.vue';
// import tenantDatasource from './views/system/tenantdatasource.vue';
-import './utils/rem'
-import { hToV, wToR } from '@/utils/pxConver';
+import { onResize, pxToRem } from '@/utils/rem';
+onResize()
import 'virtual:svg-icons-register'
window.$crudCommon = crudCommon;
debug();
@@ -61,8 +61,7 @@
app.config.globalProperties.$dayjs = dayjs;
app.config.globalProperties.website = website;
app.config.globalProperties.getScreen = getScreen;
-app.config.globalProperties.wToR = wToR;
-app.config.globalProperties.hToV = hToV;
+app.config.globalProperties.pxToRem = pxToRem;
app.use(error);
app.use(i18n);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 646f60c..4a15ca1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,7 +2,4 @@
$sidebar_collapse: 60px;
$top_height: 50px;
-@function hToV($px) {
- //@return calc($px / 1080) * 100vh;
- @return $px * 1px;
-}
+
diff --git a/src/utils/pxConver.js b/src/utils/pxConver.js
deleted file mode 100644
index 3cd85b7..0000000
--- a/src/utils/pxConver.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const wToR = width => {
- return width * 0.1 + 'rem';
-};
-export const hToV = height => {
- return height / 10.8 + 'vh';
-};
diff --git a/src/utils/rem.js b/src/utils/rem.js
index b03b390..1062416 100644
--- a/src/utils/rem.js
+++ b/src/utils/rem.js
@@ -1,16 +1,13 @@
-
-// 设置 rem 函数
-const setRem = ()=> {
- const scale = document.documentElement.clientWidth / 192
- document.documentElement.style.fontSize = scale + 'px'
+export function onResize() {
+ const resize = ()=> {
+ const scale = document.documentElement.clientWidth / 192
+ document.documentElement.style.fontSize = scale + 'px'
+ }
+ resize()
+ window.addEventListener('resize', resize)
}
-// 初始化
-setRem()
+export const pxToRem = width => {
+ return width * 0.1 + 'rem';
+};
-function onResize() {
- setRem()
-}
-
-// 改变窗口大小时重新设置 rem
-window.addEventListener('resize', onResize)
diff --git a/src/views/Home/components/HomeLeft/HomeLeft.vue b/src/views/Home/components/HomeLeft/HomeLeft.vue
index 50857af..e762cc0 100644
--- a/src/views/Home/components/HomeLeft/HomeLeft.vue
+++ b/src/views/Home/components/HomeLeft/HomeLeft.vue
@@ -20,7 +20,6 @@
</template>
<script setup>
-import { hToV, wToR } from '@/utils/pxConver';
import CommonTitle from '@/components/CommonTitle.vue';
import OverviewNext from './OverviewNext.vue';
import InspectionRaskDetails from './InspectionRaskDetails.vue';
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
index 6685c69..56e0cdc 100644
--- a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
+++ b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -22,7 +22,6 @@
import { hToV, wToR } from '@/utils/pxConver';
import * as echarts from 'echarts';
import CommonDateTime from '@/components/CommonDateTime.vue';
-// import { ref, onMounted } from 'vue';
const list = ref([
{ name: '计划执行', value: 89, color: '#FFFFFF' },
@@ -117,7 +116,7 @@
<style scoped lang="scss">
.inspection-rask-details {
margin-left: 29px;
- padding: hToV(16) 16px;
+ padding: 16px 16px;
width: 390px;
height: 414px;
background: linear-gradient( 270deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
@@ -126,12 +125,12 @@
.inspection-num {
background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
width: 360px;
- height: hToV(118);
+ height: 118px;
position: relative;
.total {
position: absolute;
left: 34px;
- top: hToV(34);
+ top: 34px;
font-weight: 500;
font-size: 14px;
color: #FFFFFF;
@@ -144,14 +143,14 @@
}
.status {
position: absolute;
- top: hToV(8);
+ top: 8px;
right: 10px;
width: 200px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
- line-height: hToV(22);
+ line-height: 22px;
padding: 0 10px 10px 0;
.name {
font-family: Source Han Sans CN, Source Han Sans CN;
diff --git a/src/views/Home/components/HomeLeft/OverviewNext.vue b/src/views/Home/components/HomeLeft/OverviewNext.vue
index e0f0ec0..78db450 100644
--- a/src/views/Home/components/HomeLeft/OverviewNext.vue
+++ b/src/views/Home/components/HomeLeft/OverviewNext.vue
@@ -40,7 +40,6 @@
</div>
</template>
<script setup>
-import { hToV, wToR } from '@/utils/pxConver';
import { Search } from '@element-plus/icons-vue';
const list = ref([
@@ -61,7 +60,7 @@
.overview-next {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
margin-left: 29px;
- padding: hToV(16) 16px;
+ padding: 16px 16px;
width: 390px;
height: 414px;
background: linear-gradient( 270deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
@@ -141,8 +140,8 @@
.table-header, .table-item {
display: flex;
justify-content: space-between;
- height: hToV(36);
- line-height: hToV(36);
+ height: 36px;
+ line-height: 36px;
padding: 0 20px;
}
.table-item {
diff --git a/src/views/Home/components/HomeRight/EventOverview.vue b/src/views/Home/components/HomeRight/EventOverview.vue
index 2447bdb..20d1dfc 100644
--- a/src/views/Home/components/HomeRight/EventOverview.vue
+++ b/src/views/Home/components/HomeRight/EventOverview.vue
@@ -1,12 +1,13 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
-import { wToR } from '@/utils/pxConver';
+import { pxToRem } from '@/utils/rem';
import overviewImg1 from '@/assets/images/home/homeRight/overview1.png';
import overviewImg2 from '@/assets/images/home/homeRight/overview2.png';
import overviewImg3 from '@/assets/images/home/homeRight/overview3.png';
import overviewImg4 from '@/assets/images/home/homeRight/overview4.png';
import overviewImg5 from '@/assets/images/home/homeRight/overview5.png';
import overviewImg6 from '@/assets/images/home/homeRight/overview6.png';
+import completionLeft from '@/assets/images/home/homeRight/completionLeft.png';
const list = ref([
{ name: '待审核', value: 265, img: overviewImg1, color: '#FF8E8E' },
@@ -16,11 +17,35 @@
{ name: '已完成', value: 246, img: overviewImg5, color: '#FF8E8E' },
{ name: '已完结', value: 262, img: overviewImg6, color: '#8EFFAC' },
]);
+const value = ref('');
+
+const options = [
+ {
+ value: 'Option1',
+ label: 'Option1',
+ },
+ {
+ value: 'Option2',
+ label: 'Option2',
+ },
+ {
+ value: 'Option3',
+ label: 'Option3',
+ },
+ {
+ value: 'Option4',
+ label: 'Option4',
+ },
+ {
+ value: 'Option5',
+ label: 'Option5',
+ },
+];
</script>
<template>
<CommonTitle title="事件概况" />
- <div :style="{ marginLeft: wToR(14) }">
+ <div :style="{ marginLeft: pxToRem(14) }">
<div class="eventOverview">
<div class="overviewData">
<div class="totalBox">
@@ -34,11 +59,49 @@
</div>
</div>
</div>
+
+ <el-select class="homeRightSelect" v-model="value" placeholder="请选择" size="large">
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <div class="completion">
+ <img class="completion-left-img" :src="completionLeft" />
+ <div class="completion-text">事件类型完成率情况</div>
+ <div class="completion-separator"></div>
+ <img class="completion-left-img" :src="completionLeft" />
+ </div>
+
+ <div class="chart">
+ <div class="chart-text">echarts柱状图</div>
+ </div>
</div>
</div>
</template>
<style scoped lang="scss">
+.homeRightSelect {
+ width: 356px;
+
+ :deep() {
+ .el-select__wrapper {
+ background: linear-gradient(90deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
+ min-height: 28px;
+ box-shadow: none;
+ border: 1px solid #306fca;
+ }
+
+ .el-select__placeholder {
+ font-family: Microsoft YaHei, Microsoft YaHei, serif;
+ color: #ffffff;
+ }
+ }
+}
+
.eventOverview {
width: 390px;
height: 445px;
@@ -119,5 +182,33 @@
}
}
}
+
+ .completion {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 356px;
+ height: 23px;
+
+ &--left-img {
+ width: 16px;
+ height: 16px;
+ }
+
+ &-text {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
+ font-weight: 400;
+ font-size: 18px;
+ color: #ffffff;
+ line-height: 21px;
+ }
+
+ &-separator {
+ width: 149px;
+ height: 0px;
+ border: 1px solid #4ca6ff;
+ opacity: 0.2;
+ }
+ }
}
</style>
diff --git a/src/views/Home/components/HomeRight/Synergy.vue b/src/views/Home/components/HomeRight/Synergy.vue
index 115a132..54e7238 100644
--- a/src/views/Home/components/HomeRight/Synergy.vue
+++ b/src/views/Home/components/HomeRight/Synergy.vue
@@ -1,6 +1,6 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
-import { wToR } from '@/utils/pxConver';
+import { pxToRem } from '@/utils/rem';
const list = ref([
{ name: '替代人工(人次)', value: 1174, color: '#FFFFFF' },
@@ -10,7 +10,7 @@
</script>
<template>
<CommonTitle title="降本增效" />
- <div :style="{ marginLeft: wToR(14) }">
+ <div :style="{ marginLeft: pxToRem(14) }">
<div class="synergy">
<div class="synergy-item" v-for="item in list">
<div class="title">{{ item.name }}</div>
diff --git a/src/views/Home/components/HomeRight/TaskAchievements.vue b/src/views/Home/components/HomeRight/TaskAchievements.vue
index 7a9f58e..2ad728a 100644
--- a/src/views/Home/components/HomeRight/TaskAchievements.vue
+++ b/src/views/Home/components/HomeRight/TaskAchievements.vue
@@ -1,6 +1,6 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
-import { wToR } from '@/utils/pxConver';
+import { pxToRem } from '@/utils/rem';
import data1 from '@/assets/images/home/homeRight/data1.png';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data3 from '@/assets/images/home/homeRight/data3.png';
@@ -19,7 +19,7 @@
</script>
<template>
<CommonTitle title="任务成果" @details="detailsFun" />
- <div :style="{ marginLeft: wToR(14) }">
+ <div :style="{ marginLeft: pxToRem(14) }">
<div class="taskAchievements">
<div class="rawData">
<div class="bigTitle">原始<br />数据</div>
--
Gitblit v1.9.3