大屏样式优化
This commit is contained in:
parent
f6bd288b5e
commit
ad5c346c61
|
|
@ -38,7 +38,7 @@ export default {
|
|||
// 调试模式，不缩放，居中显示
|
||||
// appRef.style.transform = `translate(-25%, -45%) scale(0.9, 0.9)`
|
||||
// appRef.style.overflow = 'visible'
|
||||
return
|
||||
// return
|
||||
}
|
||||
// 调试模式 - end
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,11 @@
|
|||
</div>
|
||||
|
||||
<!-- 点击城市显示详情 -->
|
||||
<div v-if="selectedCity && btnIndex == 1" class="city-tooltip">
|
||||
<div
|
||||
v-if="selectedCity && btnIndex == 1"
|
||||
class="city-tooltip"
|
||||
:style="{ left: tooltipPos.x + 25 + 'px', top: tooltipPos.y + 25 + 'px' }"
|
||||
>
|
||||
<div class="city-name">{{ selectedCity.cityName }}</div>
|
||||
<div
|
||||
>装备价值： <span class="num">{{ (selectedCity.totalValue / 100000000).toFixed(4) }}</span
|
||||
|
|
@ -57,6 +61,7 @@ export default {
|
|||
btnIndex: 1,
|
||||
myChart: null,
|
||||
selectedCity: null,
|
||||
tooltipPos: { x: 0, y: 0 },
|
||||
cityData: [
|
||||
// 调试数据
|
||||
// {
|
||||
|
|
@ -202,6 +207,7 @@ export default {
|
|||
show: true,
|
||||
position: 'top', // 先指定一个基准位置（如 'top'）
|
||||
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
||||
triggerEvent: true,
|
||||
formatter: (params) => {
|
||||
const val = params.data.value || []
|
||||
let unit = ''
|
||||
|
|
@ -273,6 +279,12 @@ export default {
|
|||
// city = this.cityData.find((c) => c.cityName === params.name)
|
||||
// }
|
||||
this.selectedCity = city || null
|
||||
if (params.event) {
|
||||
this.tooltipPos = {
|
||||
x: params.event.offsetX,
|
||||
y: params.event.offsetY,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 鼠标移出时隐藏
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -468,7 +468,7 @@ export default {
|
|||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/all-dialog.png');
|
||||
background-size: 100% auto;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -158,7 +158,7 @@ export default {
|
|||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/all-dialog.png');
|
||||
background-size: 100% auto;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -99,6 +99,7 @@ export default {
|
|||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/unit-config-dialog.png');
|
||||
background-size: 100% 100%;
|
||||
// 以宽度为准
|
||||
background-size: 100% auto;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="scroll-container">
|
||||
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
|
||||
<!-- 双层表头 -->
|
||||
<thead>
|
||||
|
|
@ -113,4 +113,20 @@ tbody tr:hover {
|
|||
background-image: url('../../img/table-hover.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
.scroll-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
/* 隐藏滚动条轨迹 */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
/* Chrome / Safari */
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: 0; /* 或者直接隐藏 */
|
||||
height: 0;
|
||||
background: transparent; /* 背景透明 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/right-dialog.png');
|
||||
background-size: 100% auto;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -124,7 +124,7 @@ export default {
|
|||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/right-dialog.png');
|
||||
background-size: 100% auto;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-list">
|
||||
<div class="table-list scroll-container">
|
||||
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
|
||||
<!-- 双层表头 -->
|
||||
<thead>
|
||||
|
|
@ -112,6 +112,21 @@ export default {
|
|||
.table-style {
|
||||
height: 350px;
|
||||
}
|
||||
.scroll-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
/* 隐藏滚动条轨迹 */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
/* Chrome / Safari */
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: 0; /* 或者直接隐藏 */
|
||||
height: 0;
|
||||
background: transparent; /* 背景透明 */
|
||||
}
|
||||
.title-tip {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div class="segment-progress">
|
||||
<!-- <div class="label">
|
||||
<slot name="label">进度</slot>
|
||||
</div> -->
|
||||
<div class="bars">
|
||||
<div v-for="i in total" :key="i" class="bar" :class="{ active: i <= activeBars }"></div>
|
||||
</div>
|
||||
<div class="percent">{{ value }}%</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SegmentProgress',
|
||||
props: {
|
||||
value: { type: Number, default: 0 }, // 百分比
|
||||
total: { type: Number, default: 20 }, // 分段数
|
||||
color: { type: String, default: '#00cfff' }, // 激活颜色
|
||||
bgColor: { type: String, default: '#444' }, // 背景颜色
|
||||
},
|
||||
computed: {
|
||||
activeBars() {
|
||||
return Math.round((this.value / 100) * this.total)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.segment-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #9cf;
|
||||
}
|
||||
|
||||
.bars {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: 6px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
background: #294C68; /* 默认背景色，实际会用 style 动态覆盖 */
|
||||
}
|
||||
|
||||
.bar.active {
|
||||
background: #00cfff; /* 激活色，实际会用 style 动态覆盖 */
|
||||
box-shadow: 0 0 4px #00cfff;
|
||||
}
|
||||
|
||||
.percent {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #00cfff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
stripe
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
:max-height="650"
|
||||
:height="600"
|
||||
class="table-container"
|
||||
>
|
||||
<el-table-column
|
||||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
background-image: url('../../img/right-dialog.png');
|
||||
background-size: 100% auto;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="more" @click="openDialog">更多 ></div>
|
||||
</div>
|
||||
|
||||
<div class="table-list">
|
||||
<div class="table-list scroll-container">
|
||||
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
|
||||
<!-- 双层表头 -->
|
||||
<thead>
|
||||
|
|
@ -125,4 +125,19 @@ tbody tr:hover {
|
|||
background-image: url('../../img/table-hover.png');
|
||||
cursor: pointer;
|
||||
}
|
||||
.scroll-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
/* 隐藏滚动条轨迹 */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
/* Chrome / Safari */
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: 0; /* 或者直接隐藏 */
|
||||
height: 0;
|
||||
background: transparent; /* 背景透明 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<img src="../../img/usage-rate.png" alt="" />
|
||||
<div style="margin: 0 10px">在用率</div>
|
||||
<div style="width: 250px">
|
||||
<el-progress :stroke-width="20" :percentage="proportion" color="#409EFF"></el-progress>
|
||||
<SegmentProgress :value="proportion" :total="20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,6 +72,7 @@ import { getProjectEquipmentApi } from '@/api/wsScreen'
|
|||
import UsageRateMore from './UsageRateMore.vue'
|
||||
import ProEquipMore from './ProEquipMore'
|
||||
import EquipItemMore from './EquipItemMore.vue'
|
||||
import SegmentProgress from './SegmentProgress.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -81,6 +82,7 @@ export default {
|
|||
UsageRateMore,
|
||||
ProEquipMore,
|
||||
EquipItemMore,
|
||||
SegmentProgress,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue