修改页面样式
This commit is contained in:
@@ -223,3 +223,10 @@
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
.el-card__header {
|
||||
padding: 10px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@@ -29,58 +29,67 @@
|
||||
</el-col>
|
||||
<el-col :span="13">
|
||||
<el-card>
|
||||
<div class="tall">
|
||||
<h3 class="mb10">暂降列表</h3>
|
||||
<div class="tall1">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
auto-resize
|
||||
:data="distributionData"
|
||||
v-loading="loading"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column
|
||||
field="newStationName"
|
||||
title="新能源站名称"
|
||||
min-width="150px"
|
||||
show-overflow-tooltip
|
||||
></vxe-column>
|
||||
<vxe-column field="startTime" title="暂降发生时刻" min-width="150px"></vxe-column>
|
||||
<vxe-column
|
||||
field="featureAmplitude"
|
||||
title="暂降(骤升)幅值(%)"
|
||||
sortable
|
||||
min-width="150px"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
field="advanceReason"
|
||||
title="暂降原因"
|
||||
sortable
|
||||
:formatter="formFilter"
|
||||
min-width="100px"
|
||||
></vxe-column>
|
||||
<vxe-column field="severity" title="严重度" min-width="100px" sortable></vxe-column>
|
||||
<vxe-column title="操作" width="80px">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="row.wavePath != null"
|
||||
size="small"
|
||||
link
|
||||
@click="boxi(row)"
|
||||
>
|
||||
查看波形
|
||||
</el-button>
|
||||
<el-button v-else disabled size="small" link>暂无波形</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>暂降列表</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <h3 class="mb10">暂降列表</h3> -->
|
||||
<div class="tall1">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
auto-resize
|
||||
:data="distributionData"
|
||||
v-loading="loading"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column
|
||||
field="newStationName"
|
||||
title="新能源站名称"
|
||||
min-width="150px"
|
||||
show-overflow-tooltip
|
||||
></vxe-column>
|
||||
<vxe-column field="startTime" title="暂降发生时刻" min-width="150px"></vxe-column>
|
||||
<vxe-column
|
||||
field="featureAmplitude"
|
||||
title="暂降(骤升)幅值(%)"
|
||||
sortable
|
||||
min-width="150px"
|
||||
></vxe-column>
|
||||
<vxe-column
|
||||
field="advanceReason"
|
||||
title="暂降原因"
|
||||
sortable
|
||||
:formatter="formFilter"
|
||||
min-width="100px"
|
||||
></vxe-column>
|
||||
<vxe-column field="severity" title="严重度" min-width="100px" sortable></vxe-column>
|
||||
<vxe-column title="操作" width="80px">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="row.wavePath != null"
|
||||
size="small"
|
||||
link
|
||||
@click="boxi(row)"
|
||||
>
|
||||
查看波形
|
||||
</el-button>
|
||||
<el-button v-else disabled size="small" link>暂无波形</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</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 {
|
||||
|
||||
@@ -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%'
|
||||
}
|
||||
@@ -605,7 +589,7 @@ const tableStore = new TableStore({
|
||||
lineHeight: 8,
|
||||
minMargin: 10,
|
||||
formatter: function (e) {
|
||||
return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
|
||||
return '{name|' + e.name + '}{percent|' + e.data.percentage+ '}'
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
@@ -753,12 +737,11 @@ const timeClick = (row: any) => {
|
||||
}
|
||||
// 点击越限
|
||||
const detailClick = (row: any, title: string, key: string) => {
|
||||
|
||||
detailRef.value.open({
|
||||
row: row,
|
||||
title: title,
|
||||
field: index.value,
|
||||
lineId: dotList.value.id ,
|
||||
lineId: dotList.value.id,
|
||||
key: key
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -20,134 +20,152 @@
|
||||
</TableHeader>
|
||||
<div v-loading="tableStore.table.loading" class="pr10">
|
||||
<el-row>
|
||||
<el-col :span="12" class="pd10">
|
||||
<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>
|
||||
<span style="color: #3399ff" class="text">:轻微污染(1,1.2]</span>
|
||||
<el-tag style="background: #ffcc33" class="tag" size="small">3级</el-tag>
|
||||
<span style="color: #ffcc33" class="text">:轻度污染(1.2,1.6]</span>
|
||||
<el-tag style="background: #ff9900" class="tag" size="small">4级</el-tag>
|
||||
<span style="color: #ff9900" class="text">:中度污染(1.6,2]</span>
|
||||
<el-tag style="background: #cc0000" class="tag" size="small">5级</el-tag>
|
||||
<span style="color: #cc0000" class="text">:重度污染(2,+∞)</span>
|
||||
<div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
|
||||
<div class="cardBox">
|
||||
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
|
||||
<template #header>
|
||||
<div style="cursor: pointer" @click="queryline(item, false)">
|
||||
<el-tag
|
||||
v-if="item.data == 3.14159 || item.data == 0"
|
||||
style="background: #ccc; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
|
||||
style="background: #339966; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
1级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
|
||||
style="background: #3399ff; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
|
||||
style="background: #ffcc33; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
|
||||
style="background: #ff9900; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="2 <= item.data && item.data && item.data !== 3.14159"
|
||||
style="background: #cc0000; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
5级
|
||||
</el-tag>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<div
|
||||
class="card-item"
|
||||
v-for="(item1, index1) in item.children"
|
||||
:key="index1"
|
||||
@click="queryline(item1, true)"
|
||||
>
|
||||
<el-tag
|
||||
v-if="item1.data == 3.14159 || item1.data == 0"
|
||||
style="background: #ccc; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="0 < item1.data && item1.data < 1 && item1.data !== 3.14159"
|
||||
style="background: #339966; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
1级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1 <= item1.data && item1.data < 1.2 && item1.data !== 3.14159"
|
||||
style="background: #3399ff; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159"
|
||||
style="background: #ffcc33; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.6 <= item1.data && item1.data < 2 && item1.data !== 3.14159"
|
||||
style="background: #ff9900; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
|
||||
style="background: #cc0000; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
5级
|
||||
</el-tag>
|
||||
<span class="xdf">
|
||||
<el-tooltip
|
||||
:show-arrow="false"
|
||||
:offset="-0"
|
||||
:content="item1.name"
|
||||
popper-class="atooltip"
|
||||
placement="bottom-start"
|
||||
<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>
|
||||
<span style="color: #3399ff" class="text">:轻微污染(1,1.2]</span>
|
||||
<el-tag style="background: #ffcc33" class="tag" size="small">3级</el-tag>
|
||||
<span style="color: #ffcc33" class="text">:轻度污染(1.2,1.6]</span>
|
||||
<el-tag style="background: #ff9900" class="tag" size="small">4级</el-tag>
|
||||
<span style="color: #ff9900" class="text">:中度污染(1.6,2]</span>
|
||||
<el-tag style="background: #cc0000" class="tag" size="small">5级</el-tag>
|
||||
<span style="color: #cc0000" class="text">:重度污染(2,+∞)</span>
|
||||
<div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
|
||||
<div class="cardBox">
|
||||
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
|
||||
<template #header>
|
||||
<div style="cursor: pointer" @click="queryline(item, false)">
|
||||
<el-tag
|
||||
v-if="item.data == 3.14159 || item.data == 0"
|
||||
style="background: #ccc; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
|
||||
style="background: #339966; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
1级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
|
||||
style="background: #3399ff; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
|
||||
style="background: #ffcc33; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
|
||||
style="background: #ff9900; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="2 <= item.data && item.data && item.data !== 3.14159"
|
||||
style="background: #cc0000; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
5级
|
||||
</el-tag>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-content">
|
||||
<div
|
||||
class="card-item"
|
||||
v-for="(item1, index1) in item.children"
|
||||
:key="index1"
|
||||
@click="queryline(item1, true)"
|
||||
>
|
||||
<div class="tooltipText">
|
||||
{{ item1.name }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<el-tag
|
||||
v-if="item1.data == 3.14159 || item1.data == 0"
|
||||
style="background: #ccc; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
无
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="0 < item1.data && item1.data < 1 && item1.data !== 3.14159"
|
||||
style="background: #339966; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
1级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1 <= item1.data && item1.data < 1.2 && item1.data !== 3.14159"
|
||||
style="background: #3399ff; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
2级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="
|
||||
1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159
|
||||
"
|
||||
style="background: #ffcc33; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
3级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="1.6 <= item1.data && item1.data < 2 && item1.data !== 3.14159"
|
||||
style="background: #ff9900; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
4级
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
|
||||
style="background: #cc0000; color: #fff"
|
||||
size="small"
|
||||
>
|
||||
5级
|
||||
</el-tag>
|
||||
<span class="xdf">
|
||||
<el-tooltip
|
||||
:show-arrow="false"
|
||||
:offset="-0"
|
||||
:content="item1.name"
|
||||
popper-class="atooltip"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<div class="tooltipText">
|
||||
{{ item1.name }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</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(() => {
|
||||
tableStore.index()
|
||||
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>
|
||||
|
||||
@@ -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 = []
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user