同步电网一张图代码

This commit is contained in:
GGJ
2024-05-23 17:30:16 +08:00
parent 42109a1478
commit 1097c971cc
6 changed files with 155 additions and 123 deletions

View File

@@ -16,20 +16,20 @@
<div class="title"> <div class="title">
<span> <span>
污染告警 污染告警
<el-popover placement="right" :width="150" trigger="hover"> <el-popover placement="right" :width="170" trigger="hover">
<template #reference> <template #reference>
<WarningFilled class="WarningFilled" /> <WarningFilled class="WarningFilled" />
</template> </template>
<div class="text"> <div class="text">
<span style="color: #00b07d">无污染(0,1]</span> <span style="color: #00b07d">无污染(0 , 1]</span>
<br /> <br />
<span style="color: #3399ff">轻微污染(1,1.2]</span> <span style="color: #3399ff">轻微污染(1 , 1.2]</span>
<br /> <br />
<span style="color: #ffcc33">轻度污染(1.2,1.6]</span> <span style="color: #ffcc33">轻度污染(1.2 , 1.6]</span>
<br /> <br />
<span style="color: #ff9900">中度污染(1.6,2]</span> <span style="color: #ff9900">中度污染(1.6 , 2]</span>
<br /> <br />
<span style="color: #cc0000">重度污染(2,+)</span> <span style="color: #cc0000">重度污染(2 , +)</span>
</div> </div>
</el-popover> </el-popover>
</span> </span>
@@ -120,17 +120,29 @@ const contaminateC = () => {
data = res.data.gwInfo data = res.data.gwInfo
} }
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (data[i] >= 0 || data[i] < 1) { if (data[i] >= 2) {
a1++
} else if (data[i] >= 1 || data[i] < 1.2) {
a2++
} else if (data[i] >= 1.2 || data[i] < 1.6) {
a3++
} else if (data[i] >= 1.6 || data[i] < 2) {
a4++
} else if (data[i] >= 2) {
a5++ a5++
} else if (data[i] >= 1.6 && data[i] < 2) {
a4++
} else if (data[i] >= 1.2 && data[i] < 1.6) {
a3++
} else if (data[i] >= 1 && data[i] < 1.2) {
a4++
} else if (data[i] >= 0 && data[i] < 1) {
a1++
} }
// if (data[i] >= 0 || data[i] < 1) {
// a1++
// } else if (data[i] >= 1 || data[i] < 1.2) {
// a2++
// } else if (data[i] >= 1.2 || data[i] < 1.6) {
// a3++
// } else if (data[i] >= 1.6 || data[i] < 2) {
// a4++
// } else if (data[i] >= 2) {
// a5++
// }
} }
// console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length) // console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length)

View File

@@ -32,7 +32,7 @@
<el-col :span="8"> <el-col :span="8">
<h3 class="mb10 iconBox"> <h3 class="mb10 iconBox">
<span></span> <span></span>
告警明细 告警明细 ()
</h3> </h3>
<el-descriptions title="" border :column="2" size="small"> <el-descriptions title="" border :column="2" size="small">
<el-descriptions-item width="140px" label="告警原因"> <el-descriptions-item width="140px" label="告警原因">

View File

@@ -5,10 +5,7 @@
<div class="title"> <div class="title">
<span @click="GridDiagram(i)"> <span @click="GridDiagram(i)">
{{ item.title }} {{ item.title }}
<span class="ratio"> <span class="ratio">{{ item.ratioTitle }}: {{ item.ratio }}%</span>
{{item.ratioTitle}}:
{{ item.ratio }}%
</span>
</span> </span>
<span class="info" @click="open(i)"> <span class="info" @click="open(i)">
详情 详情
@@ -166,7 +163,7 @@ const list: any = ref([
new URL(`@/assets/img/JCD-ZX.png`, import.meta.url), new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
new URL(`@/assets/img/JCD-GJ.png`, import.meta.url) new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
], ],
ratioTitle:'告警率', ratioTitle: '告警率',
ratio: 0, ratio: 0,
titleT: ['总数', '在线', '告警'], titleT: ['总数', '在线', '告警'],
color: ['#000', '#2dcd28', '#bd3124'], color: ['#000', '#2dcd28', '#bd3124'],
@@ -211,7 +208,7 @@ const list: any = ref([
title: '变电站', title: '变电站',
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)], img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
color: ['#000', '#bd3124'], color: ['#000', '#bd3124'],
ratioTitle:'告警率', ratioTitle: '告警率',
ratio: 0, ratio: 0,
titleT: ['总数', '告警'], titleT: ['总数', '告警'],
list: [ list: [
@@ -251,7 +248,7 @@ const list: any = ref([
title: '终端', title: '终端',
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)], img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
titleT: ['总数', '在运'], titleT: ['总数', '在运'],
ratioTitle:'在运率', ratioTitle: '在运率',
ratio: 0, ratio: 0,
color: ['#000', '#2dcd28'], color: ['#000', '#2dcd28'],
list: [ list: [
@@ -295,11 +292,11 @@ const boxHeight = mainHeight(40, 3)
// 详情 // 详情
const open = (e: any) => { const open = (e: any) => {
if (e == 0) { if (e == 0) {
standRef.value.open(formRow.value)
} else if (e == 1) {
terminalRef.value.open(formRow.value)
} else if (e == 2) {
pointRef.value.open(formRow.value) pointRef.value.open(formRow.value)
} else if (e == 1) {
standRef.value.open(formRow.value)
} else if (e == 2) {
terminalRef.value.open(formRow.value)
} }
} }
const info = async (row: any) => { const info = async (row: any) => {
@@ -351,7 +348,7 @@ const info = async (row: any) => {
getSubLineGiveAnAlarm(form).then(res => { getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data list.value[1].list = data[0].data
list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2) list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
}) })
// 终端 // 终端

View File

@@ -4,7 +4,25 @@
<!-- 综合评估 --> <!-- 综合评估 -->
<div style="height: 110px"> <div style="height: 110px">
<div class="title"> <div class="title">
<span>综合评估</span> <span>综合评估
<el-popover placement="right" :width="150" trigger="hover">
<template #reference>
<WarningFilled class="WarningFilled" />
</template>
<div class="text">
<span style="color: #00b07d">优质(4.5 , 5]</span>
<br />
<span style="color: #3399ff">良好(4 , 4.5]</span>
<br />
<span style="color: #ffcc33">合格(3 , 4]</span>
<br />
<span style="color: #ff9900">较差(2 , 3]</span>
<br />
<span style="color: #cc0000">极差[1 , 2]</span>
</div>
</el-popover>
</span>
<span class="info" @click="open(0)"> <span class="info" @click="open(0)">
详情 详情
<ArrowRight style="width: 12px" /> <ArrowRight style="width: 12px" />
@@ -220,6 +238,7 @@ import { onMounted, reactive, ref, provide } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue' import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { WarningFilled } from '@element-plus/icons-vue'
import { ArrowRight } from '@element-plus/icons-vue' import { ArrowRight } from '@element-plus/icons-vue'
import Evaluate from './details/evaluate.vue' import Evaluate from './details/evaluate.vue'
import steadyState from './details/steadyState.vue' import steadyState from './details/steadyState.vue'
@@ -386,6 +405,11 @@ defineExpose({ info, show })
cursor: pointer; cursor: pointer;
color: #757575; color: #757575;
} }
.WarningFilled {
width: 12px;
font-weight: 500;
cursor: pointer;
}
} }
.TJTop { .TJTop {
display: flex; display: flex;

View File

@@ -48,7 +48,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue' import { onMounted, nextTick, ref, provide } from 'vue'
import Area from '@/components/form/area/index.vue' import Area from '@/components/form/area/index.vue'
import Map from './components/map.vue' // import Map from './components/map.vue'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { Search, Refresh } from '@element-plus/icons-vue' import { Search, Refresh } from '@element-plus/icons-vue'
@@ -59,7 +59,7 @@ import cityMapR from './components/cityMapR.vue'
import Info from './components/line/info.vue' import Info from './components/line/info.vue'
import DatePicker from '@/components/form/datePicker/index.vue' import DatePicker from '@/components/form/datePicker/index.vue'
import { map } from 'xe-utils'
const dictData = useDictData() const dictData = useDictData()
defineOptions({ defineOptions({
name: 'panorama' name: 'panorama'
@@ -94,7 +94,7 @@ const form: any = ref({
const height = mainHeight(10) const height = mainHeight(10)
// 获取区域名称 // 获取区域名称
const changeValue = (e: any) => { const changeValue = (e: any) => {
// mapRef.value.locatePositions(e) // mapRef.value.locatePositions(e)
form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
options.value[0].name = e.data.areaName options.value[0].name = e.data.areaName
@@ -118,12 +118,12 @@ const infoShow = (e: boolean) => {
} }
// 地图控制图层 // 地图控制图层
const LookMap = (row: any, key?: any) => { const LookMap = (row: any, key?: any) => {
// mapRef.value.addMarkers({ ...row, type: 1 }, key) // mapRef.value.addMarkers({ ...row, type: 1 }, key)
} }
//区域统计展示切换 //区域统计展示切换
const GridDiagram = (k?: number) => { const GridDiagram = (k?: number) => {
// mapRef.value.radiusPop(k) // mapRef.value.radiusPop(k)
// mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425) // mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425)
} }
const info = () => { const info = () => {
form.value.startTime = datePickerRef.value.timeValue[0] form.value.startTime = datePickerRef.value.timeValue[0]
@@ -133,7 +133,7 @@ const info = () => {
form.value.type = datePickerRef.value.interval form.value.type = datePickerRef.value.interval
// mapRef.value.grids(form.value) // mapRef.value.grids(form.value)
if (control.value == 1) { if (control.value == 1) {
mapLRef.value.info(form.value) mapLRef.value.info(form.value)
mapRRef.value.info(form.value) mapRRef.value.info(form.value)

View File

@@ -1,92 +1,91 @@
<template> <template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" :before-close="Cancel"> <el-dialog draggable v-model="dialogVisible" :title="title" :before-close="Cancel">
<el-scrollbar> <el-form :inline="false" :model="configStore" label-width="auto">
<el-form :inline="false" :model="configStore" label-width="160px"> <el-divider border-style="dashed">全局</el-divider>
<el-divider border-style="dashed">全局</el-divider> <div class="layout-config-global form-two">
<div class="layout-config-global form-two"> <el-form-item label="组件主名称">
<el-form-item label="组件主名称"> <el-input v-model="configStore.name" placeholder="请输入主题名称" />
<el-input v-model="configStore.name" placeholder="请输入主题名称" /> </el-form-item>
</el-form-item> <el-form-item label="后台页面切换动画">
<el-form-item label="后台页面切换动画"> <el-select v-model="configStore.mainAnimation">
<el-select v-model="configStore.mainAnimation"> <el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-right" value="slide-right"></el-option> <el-option label="slide-left" value="slide-left"></el-option>
<el-option label="slide-left" value="slide-left"></el-option> <el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option> <el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option> <el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option> <el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option> <el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option> </el-select>
</el-select> </el-form-item>
</el-form-item> <el-form-item label="组件主题色">
<el-form-item label="组件主题色"> <el-color-picker v-model="configStore.elementUiPrimary[0]" />
<el-color-picker v-model="configStore.elementUiPrimary[0]" /> </el-form-item>
</el-form-item> <el-form-item label="表格标题栏背景颜色">
<el-form-item label="表格标题栏背景颜色"> <el-color-picker v-model="configStore.tableHeaderBackground[0]" />
<el-color-picker v-model="configStore.tableHeaderBackground[0]" /> </el-form-item>
</el-form-item> <el-form-item label="表格标题栏文字颜色">
<el-form-item label="表格标题栏文字颜色"> <el-color-picker v-model="configStore.tableHeaderColor[0]" />
<el-color-picker v-model="configStore.tableHeaderColor[0]" /> </el-form-item>
</el-form-item> <el-form-item label="表格激活栏颜色">
<el-form-item label="表格激活栏颜色"> <el-color-picker v-model="configStore.tableCurrent[0]" />
<el-color-picker v-model="configStore.tableCurrent[0]" /> </el-form-item>
</el-form-item> <el-form-item label="组件主描述">
<el-form-item label="组件主描述"> <el-input
<el-input v-model="configStore.remark"
v-model="configStore.remark" :autosize="{ minRows: 2, maxRows: 4 }"
:autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
type="textarea" placeholder="请输入描述"
placeholder="请输入描述" />
/> </el-form-item>
</el-form-item> </div>
</div> <el-divider border-style="dashed">侧边栏</el-divider>
<el-divider border-style="dashed">侧边栏</el-divider> <div class="layout-config-aside form-two">
<div class="layout-config-aside form-two"> <el-form-item label="侧边菜单栏背景色">
<el-form-item label="侧边菜单栏背景色"> <el-color-picker v-model="configStore.menuBackground[0]" />
<el-color-picker v-model="configStore.menuBackground[0]" /> </el-form-item>
</el-form-item> <el-form-item label="侧边菜单文字颜色">
<el-form-item label="侧边菜单文字颜色"> <el-color-picker v-model="configStore.menuColor[0]" />
<el-color-picker v-model="configStore.menuColor[0]" /> </el-form-item>
</el-form-item> <el-form-item label="侧边菜单激活项背景色">
<el-form-item label="侧边菜单激活项背景色"> <el-color-picker v-model="configStore.menuActiveBackground[0]" />
<el-color-picker v-model="configStore.menuActiveBackground[0]" /> </el-form-item>
</el-form-item> <el-form-item label="侧边菜单激活项文字色">
<el-form-item label="侧边菜单激活项文字色"> <el-color-picker v-model="configStore.menuActiveColor[0]" />
<el-color-picker v-model="configStore.menuActiveColor[0]" /> </el-form-item>
</el-form-item> <el-form-item label="侧边菜单顶栏背景色">
<el-form-item label="侧边菜单顶栏背景色"> <el-color-picker v-model="configStore.menuTopBarBackground[0]" />
<el-color-picker v-model="configStore.menuTopBarBackground[0]" /> </el-form-item>
</el-form-item> </div>
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="顶栏背景色">
<el-color-picker v-model="configStore.headerBarBackground[0]" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker v-model="configStore.headerBarTabColor[0]" />
</el-form-item>
<el-form-item label="顶栏logo">
<el-image
style="height: 50px"
:src="logoFile.url"
:preview-src-list="[logoFile.url]"
v-if="logoFile.url"
class="mr10"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="顶栏背景色">
<el-color-picker v-model="configStore.headerBarBackground[0]" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker v-model="configStore.headerBarTabColor[0]" />
</el-form-item>
<el-form-item label="顶栏logo">
<el-image
style="height: 50px"
:src="logoFile.url"
:preview-src-list="[logoFile.url]"
v-if="logoFile.url"
class="mr10"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确定</el-button> <el-button type="primary" @click="onSubmit">确定</el-button>