修改页面样式
This commit is contained in:
@@ -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">
|
||||
@@ -150,7 +148,7 @@ const tableStore = new TableStore({
|
||||
loadCallback: () => {
|
||||
histogram(tableStore.table.data)
|
||||
header.value.areaRef.change()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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]
|
||||
@@ -224,7 +225,7 @@ function remove(parentIndex: number, index: number) {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
cursor: grab;
|
||||
|
||||
|
||||
text-align: center;
|
||||
user-select: none; /* 防止拖拽时选中文字 */
|
||||
transition: transform 0.2s, background-color 0.2s;
|
||||
|
||||
Reference in New Issue
Block a user