修改页面样式

This commit is contained in:
GGJ
2025-04-24 16:29:15 +08:00
parent dc4b37b833
commit cd20b4134a
9 changed files with 400 additions and 230 deletions

View File

@@ -223,3 +223,10 @@
min-width: 128px;
}
}
.el-card__header {
padding: 10px;
span {
font-size: 16px;
font-weight: 600;
}
}

View File

@@ -29,8 +29,13 @@
</el-col>
<el-col :span="13">
<el-card>
<div class="tall">
<h3 class="mb10">暂降列表</h3>
<template #header>
<div class="card-header">
<span>暂降列表</span>
</div>
</template>
<!-- <h3 class="mb10">暂降列表</h3> -->
<div class="tall1">
<vxe-table
height="auto"
@@ -76,11 +81,15 @@
</vxe-column>
</vxe-table>
</div>
</div>
</el-card>
<el-card class="mt10">
<template #header>
<div class="card-header">
<span>暂降波形</span>
</div>
</template>
<div class="tall" v-loading="loading1">
<h3 class="mb10">暂降波形</h3>
<!-- <h3 class="mb10">暂降波形</h3> -->
<div v-if="wp != null">
<rmsboxi :value="1" :height="height" :boxoList="boxoList" :wp="wp" />
</div>
@@ -295,13 +304,16 @@ const clickMap = (e: any) => {
}
// 表格数据处理
const tabulation = (e: any) => {
console.log();
console.log()
loading.value = true
voltageRideThroughEventQueryPage({
...tableStore.table.params,
areaId: e.data.id,
frequencyType: e.seriesName == '高压' ? triggerType.filter(item => item.code == 'Voltage_Rise')[0].id : triggerType.filter(item => item.code == 'Voltage_Dip')[0].id
frequencyType:
e.seriesName == '高压'
? triggerType.filter(item => item.code == 'Voltage_Rise')[0].id
: triggerType.filter(item => item.code == 'Voltage_Dip')[0].id
})
.then(res => {
distributionData.value = res.data
@@ -377,10 +389,10 @@ const layout1 = mainHeight(93) as any
height: calc(v-bind('layout1.height') - 30px);
}
.tall {
height: calc((v-bind('layout1.height') - 60px) / 2);
height: calc((v-bind('layout1.height') - 100px) / 2);
}
.tall1 {
height: calc((v-bind('layout1.height') - 60px) / 2 - 35px);
height: calc((v-bind('layout1.height') - 100px) / 2 - 50px);
}
.group {

View File

@@ -88,11 +88,7 @@
<el-link
:type="row.vtimes == '1' ? 'danger' : 'success'"
:class="row.vtimes == '1' ? 'percentage' : ''"
@click="
row.vtimes == '1'
? detailClick(row, '谐波电压(%)', '2')
: ''
"
@click="row.vtimes == '1' ? detailClick(row, '谐波电压(%)', '2') : ''"
>
{{ row.vtimes == '1' ? '越限' : '合格' }}
</el-link>
@@ -103,11 +99,7 @@
<el-link
:type="row.itimes == '1' ? 'danger' : 'success'"
:class="row.itimes == '1' ? 'percentage' : ''"
@click="
row.itimes == '1'
? detailClick(row, '谐波电流(A)', '3')
: ''
"
@click="row.itimes == '1' ? detailClick(row, '谐波电流(A)', '3') : ''"
>
{{ row.itimes == '1' ? '越限' : '合格' }}
</el-link>
@@ -148,11 +140,7 @@
<el-link
:type="row.flicker == '1' ? 'danger' : 'success'"
:class="row.flicker == '1' ? 'percentage' : ''"
@click="
row.flicker == '1'
? detailClick(row, '长时闪变', 'plt')
: ''
"
@click="row.flicker == '1' ? detailClick(row, '长时闪变', 'plt') : ''"
>
{{ row.flicker == '1' ? '越限' : '合格' }}
</el-link>
@@ -184,11 +172,7 @@
:class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
@click="
row.sequenceCurrentUnbalance == '1'
? detailClick(
row,
'电流不平衡度(%)',
'iNeg'
)
? detailClick(row, '电流不平衡度(%)', 'iNeg')
: ''
"
>
@@ -509,35 +493,35 @@ const tableStore = new TableStore({
{
label: '0%~10%',
quantity: res.minsNum0,
percentage: res.proportion0 + '%',
percentage: res.proportion0.toFixed(2) + '%',
crossTheLine: res.isOrNot0,
value: '0%~10%'
},
{
label: '10%~20%',
quantity: res.minsNum1,
percentage: res.proportion1 + '%',
percentage: res.proportion1.toFixed(2) + '%',
crossTheLine: res.isOrNot1,
value: '10%~10%'
},
{
label: '20%~30%',
quantity: res.minsNum2,
percentage: res.proportion2 + '%',
percentage: res.proportion2.toFixed(2) + '%',
crossTheLine: res.isOrNot2,
value: '10%~30%'
},
{
label: '30%~40%',
quantity: res.minsNum3,
percentage: res.proportion3 + '%',
percentage: res.proportion3.toFixed(2) + '%',
crossTheLine: res.isOrNot3,
value: '30%~40%'
},
{
label: '40%~50%',
quantity: res.minsNum4,
percentage: res.proportion4 + '%',
percentage: res.proportion4.toFixed(2) + '%',
crossTheLine: res.isOrNot4,
value: '40%~50%'
}
@@ -546,35 +530,35 @@ const tableStore = new TableStore({
{
label: '50%~60%',
quantity: res.minsNum5,
percentage: res.proportion5 + '%',
percentage: res.proportion5.toFixed(2) + '%',
crossTheLine: res.isOrNot5,
value: '50%~60%'
},
{
label: '60%~70%',
quantity: res.minsNum6,
percentage: res.proportion6 + '%',
percentage: res.proportion6.toFixed(2) + '%',
crossTheLine: res.isOrNot6,
value: '60%~70%'
},
{
label: '70%~80%',
quantity: res.minsNum7,
percentage: res.proportion7 + '%',
percentage: res.proportion7.toFixed(2) + '%',
crossTheLine: res.isOrNot7,
value: '70%~80%'
},
{
label: '80%~90%',
quantity: res.minsNum8,
percentage: res.proportion8 + '%',
percentage: res.proportion8.toFixed(2) + '%',
crossTheLine: res.isOrNot8,
value: '80%~90%'
},
{
label: '90%~100%',
quantity: res.minsNum9,
percentage: res.proportion9 + '%',
percentage: res.proportion9.toFixed(2) + '%',
crossTheLine: res.isOrNot9,
value: '90%~100%'
}
@@ -753,7 +737,6 @@ const timeClick = (row: any) => {
}
// 点击越限
const detailClick = (row: any, title: string, key: string) => {
detailRef.value.open({
row: row,
title: title,

View File

@@ -89,7 +89,7 @@
</vxe-column>
<vxe-column field="version" title="版本信息"></vxe-column>
<vxe-column field="ip" title="网络参数"></vxe-column>
<vxe-column field="baseFlowMeal" title="基础套餐(MB)"></vxe-column>
<!-- <vxe-column field="baseFlowMeal" title="基础套餐(MB)"></vxe-column>
<vxe-column field="reamFlowMeal" title="扩展套餐(MB)"></vxe-column>
<vxe-column title="剩余流量(MB)">
<template #default="{ row }">
@@ -110,7 +110,7 @@
: ''
}}
</template>
</vxe-column>
</vxe-column> -->
<vxe-column field="runFlag" title="终端状态">
<template #default="{ row }">
<el-tag v-if="row.runFlag === 0" type="success" size="small">投运</el-tag>

View File

@@ -2,8 +2,6 @@
<div class="default-main">
<TableHeader datePicker ref="header">
<template v-slot:select>
</template>
</TableHeader>
<div v-loading="tableStore.table.loading" class="pr10">

View File

@@ -20,7 +20,18 @@
</TableHeader>
<div v-loading="tableStore.table.loading" class="pr10">
<el-row>
<el-col :span="12" class="pd10">
<el-col :span="12" class="pd10" style="position: relative">
<el-radio-group v-model="radio1" class="ml10 group" @change="radioChange" size="small">
<el-radio-button label="列表" :value="0" />
<el-radio-button label="图形" :value="1" />
</el-radio-group>
<el-carousel
ref="carouselRef"
:autoplay="false"
:arrow="'never'"
:height="`calc(${layout.height} + 35px)`"
>
<el-carousel-item style="padding: 0 1px">
<el-tag style="background: #339966" class="tag" size="small">1</el-tag>
<span style="color: #339966" class="text">:无污染(0,1]</span>
<el-tag style="background: #3399ff" class="tag" size="small">2</el-tag>
@@ -110,7 +121,9 @@
2
</el-tag>
<el-tag
v-if="1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159"
v-if="
1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159
"
style="background: #ffcc33; color: #fff"
size="small"
>
@@ -148,6 +161,11 @@
</el-card>
</div>
</div>
</el-carousel-item>
<el-carousel-item>
<MyEchartMap ref="EchartMap" :options="echartMapList" class="map" />
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="12">
<my-echart class="tall" :options="echartList" />
@@ -212,7 +230,7 @@
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import provinceDetails from './components/provinceDetails.vue'
@@ -225,11 +243,14 @@ import * as echarts from 'echarts/core'
defineOptions({
name: 'harmonic-boot/qydetailedAnalysis/pollutionqy'
})
const carouselRef = ref()
const radio1 = ref(0)
const dictData = useDictData()
const echartList = ref({})
const provinceDetailsRef = ref()
const rankingRef = ref()
const EchartMap = ref()
const echartMapList: any = ref({})
const header = ref()
const options = dictData.getBasicData('Pollution_Statis', [
'I_Neg',
@@ -244,7 +265,9 @@ const tableStore = new TableStore({
method: 'POST',
column: [],
loadCallback: () => {
map(tableStore.table.data)
histogram(tableStore.table.data)
EchartMap.value.GetEchar(dictData.state.area[0].name)
header.value.areaRef.change()
}
})
@@ -256,7 +279,9 @@ tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.reportFlag = 3
tableStore.table.params.serverName = 'event-boot'
const radioChange = (val: any) => {
carouselRef.value.setActiveItem(val)
}
// 地图数处理
const rankingClick = () => {
rankingRef.value.open(tableStore.table.params)
@@ -268,8 +293,6 @@ const queryline = (row: any, flag: boolean) => {
// 表格数据处理
// 柱状图数据处理
const histogram = (res: any) => {
console.log(123)
echartList.value = {
title: {
text: '区域'
@@ -539,8 +562,129 @@ const histogram = (res: any) => {
}
}
// 地图数处理
const map = (res: any) => {
let areaData: any = []
let xarr = []
let yarr = []
let arr = []
let arr1: any = []
res.forEach(element => {
xarr.push(element.name)
if (element.data == 0) {
element.data = 0.1
yarr.push(element.data)
}
yarr.push(element.data)
let p = {
name: element.name,
value: element.data
}
arr.push(p)
let d = element.name.split('\n')
let p1 = {
name: d[0],
value: element.data
}
arr1.push(p1)
})
echartMapList.value = {
name: '',
title: {
text: '电能质量污区图分布'
},
tooltip: {
formatter: function (params) {
var tips = ''
if (params.value === -1 || window.isNaN(params.value)) {
tips =
"<font style='color:#fff'>" +
params.name +
'</font><br/>区域污染评估:' +
"<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>"
} else if (params.value === 0.1 || window.isNaN(params.value)) {
tips =
"<font style='color:#fff'>" +
params.name +
'</font><br/>区域污染评估:' +
"<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>"
} else {
tips +=
"<font style='color:#fff'>" +
params.name +
'</font><br/>区域污染评估' +
"<font style='color:#fff'>" +
params.value +
'</font><br/>'
}
return tips
}
},
visualMap: {
min: 0,
max: 2,
left: 25,
bottom: 40,
pieces: [
{
gt: 2,
lt: 10000,
label: '重度污染',
color: '#CC0000'
},
{
gte: 1.2,
lt: 1.6,
label: '轻度污染',
color: '#FFCC33'
},
{
gt: 1.6,
lt: 2,
label: '中度污染',
color: '#FF9900'
},
{
gte: 1,
lte: 1.2,
label: '轻微污染',
color: '#3399FF'
},
{
gte: 0.1,
lte: 1,
label: '无污染',
color: '#339966'
},
{
gte: -1,
lte: 0.05,
label: '无数据',
color: '#ccc'
}
]
},
options: {
series: [
{
type: 'map',
geoIndex: 0,
data: arr1
}
]
}
}
}
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 10)
})
const layout = mainHeight(133) as any
const layout1 = mainHeight(93) as any
@@ -621,4 +765,16 @@ const layout1 = mainHeight(93) as any
}
}
}
.map {
height: v-bind('layout.height');
}
:deep(.el-carousel__indicators) {
display: none;
}
.group {
position: absolute;
right: 10px;
top: 10px;
z-index: 99;
}
</style>

View File

@@ -119,12 +119,12 @@ const tableStore = new TableStore({
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.reportFlag = 3
tableStore.table.params.statisticalType = options[0]
provide('tableStore', tableStore)
// 地图点击事件
const getRegionByRegion = (list: any) => {
console.log("🚀 ~ getRegionByRegion ~ list:", list)
tableStore.table.params.deptIndex = list.id
tableStore.onTableAction('search', {})
}
@@ -134,6 +134,7 @@ const getRegionByRegion = (list: any) => {
// 地图数处理
const map = (res: any) => {
console.log("🚀 ~ map ~ res:", res)
let areaData: any = []
let xarr = []
let yarr = []

View File

@@ -137,11 +137,11 @@ const currentTDinfo = ref<any>(null)
// td 中开始拖拽拖拽
function tdDragStart(parentIndex: number, index: number, e: any) {
if (!classScheduleCardList.value[parentIndex].courseList[index]) return
const item = JSON.parse(JSON.stringify(classScheduleCardList.value[parentIndex].courseList[index]))
item.customDelete = false
dragingTdInfo.value = item
classScheduleCardList.value[parentIndex].courseList[index] = null
// if (!classScheduleCardList.value[parentIndex].courseList[index]) return
// const item = JSON.parse(JSON.stringify(classScheduleCardList.value[parentIndex].courseList[index]))
// item.customDelete = false
// dragingTdInfo.value = item
// classScheduleCardList.value[parentIndex].courseList[index] = null
}
// 移动到 td 上触发
@@ -183,6 +183,7 @@ function tdDragleave(parentIndex: number, index: number, event: any) {
// td中拖拽课程结束
function tdDragend(parentIndex: number, index: number, e: any) {
if (currentTDinfo.value == null) return
const { parentIndex: currentParentIndex, index: currentIndex } = currentTDinfo.value
const currentTd = classScheduleCardList.value[currentParentIndex].courseList[currentIndex]

View File

@@ -69,7 +69,19 @@
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
<template #default="scope">
<div>
<div class="segmentedIcon">{{ scope.item.num }}</div>
<div
class="segmentedIcon"
:style="{
backgroundColor:
scope.item.num > 0
? '#FF9100'
: scope.item.num > 99
? '#ff0000'
: '#007D7B'
}"
>
{{ scope.item.num > 99 ? '99+' : scope.item.num }}
</div>
<div>{{ scope.item.label }}</div>
</div>
</template>